/* ============================================================
   HSYS GAMING CORPORATION — games.hsys.at
   Design system: retro-futuristic neon arcade
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* base space palette */
  --bg:        #06070f;
  --bg-2:      #0b0e22;
  --bg-3:      #141a38;
  --panel:     rgba(18,24,52,.55);
  --panel-2:   rgba(12,16,38,.78);
  --line:      rgba(120,140,225,.16);
  --line-2:    rgba(120,140,225,.30);

  /* neon accents (from HSYS key art) */
  --cyan:      #2ee6ff;
  --magenta:   #ff3ea5;
  --pink:      #ff66cf;
  --orange:    #ff9f1c;
  --amber:     #ffc24b;
  --violet:    #8b6cff;

  /* text */
  --text:      #eaf0ff;
  --muted:     #97a3c9;
  --dim:       #6b78a6;

  /* global accent (overridden per game) */
  --accent:    var(--cyan);
  --accent-2:  var(--magenta);

  --radius:    16px;
  --radius-sm: 10px;
  --maxw:      1240px;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --t:         .28s var(--ease);

  --font-display: 'Orbitron', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-pixel:   'Press Start 2P', monospace;
}

/* per-game themes */
.theme-driftfall { --accent:#3bd9c7; --accent-2:#ffb020; }
.theme-galatria  { --accent:#2ee6ff; --accent-2:#ff3ea5; }
.theme-harbour   { --accent:#e7b54a; --accent-2:#4a93d6; }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
ul{ list-style:none; }
::selection{ background:var(--accent); color:#04060e; }

/* ---------- Animated cosmic backdrop (fixed) ---------- */
.cosmos{ position:fixed; inset:0; z-index:-2; overflow:hidden; background:
  radial-gradient(1200px 700px at 78% -8%, rgba(255,62,165,.16), transparent 60%),
  radial-gradient(1100px 800px at 12% 8%, rgba(46,230,255,.14), transparent 55%),
  radial-gradient(900px 900px at 50% 120%, rgba(139,108,255,.18), transparent 60%),
  linear-gradient(180deg,#06070f 0%, #080a1a 45%, #06070f 100%);
}
.cosmos::before{ /* drifting grid */
  content:''; position:absolute; inset:-50%;
  background-image:
    linear-gradient(rgba(120,140,225,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,225,.06) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(420px) rotateX(62deg) translateY(0);
  mask-image:radial-gradient(ellipse 60% 60% at 50% 30%, #000 30%, transparent 75%);
  animation:gridDrift 26s linear infinite;
  opacity:.5;
}
@keyframes gridDrift{ from{ background-position:0 0 } to{ background-position:0 64px } }
#stars{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.scanlines{ position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background:repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.18) 2px 3px); }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.section{ padding:clamp(64px,9vw,128px) 0; position:relative; }
.section--tight{ padding:clamp(44px,6vw,80px) 0; }

.eyebrow{
  font-family:var(--font-pixel); font-size:.62rem; letter-spacing:.12em;
  color:var(--accent); text-transform:uppercase; display:inline-block; margin-bottom:18px;
  text-shadow:0 0 14px color-mix(in srgb, var(--accent) 60%, transparent);
}
.section-head{ max-width:720px; margin-bottom:clamp(34px,5vw,60px); }
.section-head.center{ margin-inline:auto; text-align:center; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:800; line-height:1.05; letter-spacing:.01em; }
h2.title{ font-size:clamp(2rem,4.4vw,3.4rem); }
h3.title{ font-size:clamp(1.4rem,2.4vw,2rem); }
.lead{ color:var(--muted); font-size:clamp(1rem,1.4vw,1.18rem); margin-top:16px; }
.gradient-text{
  background:linear-gradient(100deg,var(--accent),var(--accent-2) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Buttons ---------- */
.btn{
  --bw:1px;
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  padding:.92em 1.7em; border-radius:999px; font-weight:600; font-size:.98rem;
  letter-spacing:.02em; position:relative; transition:transform var(--t), box-shadow var(--t), background var(--t);
  border:var(--bw) solid var(--line-2); background:var(--panel); color:var(--text); backdrop-filter:blur(8px);
}
.btn svg{ width:1.15em; height:1.15em; }
.btn:hover{ transform:translateY(-3px); }
.btn:active{ transform:translateY(-1px); }
.btn-primary{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  color:#05060e; border-color:transparent; font-weight:700;
  box-shadow:0 8px 30px -8px color-mix(in srgb,var(--accent) 70%, transparent);
}
.btn-primary:hover{ box-shadow:0 14px 44px -10px color-mix(in srgb,var(--accent) 85%, transparent); }
.btn-ghost{ background:transparent; }
.btn-ghost:hover{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 24px -4px var(--accent); }
.btn-lg{ padding:1.05em 2.2em; font-size:1.06rem; }
.btn-steam{ background:linear-gradient(100deg,#1b2838,#2a475e); color:#fff; border-color:rgba(102,192,244,.4); }
.btn-steam:hover{ box-shadow:0 10px 34px -8px rgba(102,192,244,.55); }

/* ---------- Badges ---------- */
.badges{ display:flex; flex-wrap:wrap; gap:8px; }
.badge{
  display:inline-flex; align-items:center; gap:.45em;
  font-size:.74rem; font-weight:600; letter-spacing:.03em;
  padding:.4em .8em; border-radius:999px;
  border:1px solid var(--line-2); background:rgba(8,11,26,.6); color:var(--muted);
}
.badge svg{ width:1em; height:1em; }
.badge--accent{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 50%, transparent);
  background:color-mix(in srgb,var(--accent) 12%, transparent); }
.badge--steam{ color:#cfe8ff; border-color:rgba(102,192,244,.45); }
.badge--free{ color:#6ee7a8; border-color:rgba(110,231,168,.45); background:rgba(110,231,168,.08); }
.badge--soon{ color:var(--amber); border-color:rgba(255,194,75,.5); background:rgba(255,194,75,.08); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px clamp(16px,4vw,40px);
  transition:background var(--t), border-color var(--t), padding var(--t);
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(6,7,15,.72); backdrop-filter:blur(14px); border-bottom-color:var(--line); padding-block:10px; }
.brand{ display:flex; align-items:center; gap:12px; font-family:var(--font-display); font-weight:900;
  letter-spacing:.14em; font-size:1.15rem; }
.brand .mark{ width:34px; height:34px; flex:none; }
.brand b{ color:#fff; }
.brand span{ color:var(--cyan); text-shadow:0 0 16px rgba(46,230,255,.5); }

.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{ padding:.5em .9em; border-radius:8px; font-size:.92rem; font-weight:500; color:var(--muted);
  transition:color var(--t), background var(--t); position:relative; }
.nav-links a:hover{ color:var(--text); }
.nav-links a.active{ color:var(--text); }
.nav-links a.active::after{ content:''; position:absolute; left:.9em; right:.9em; bottom:.2em; height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:2px; }
.nav-right{ display:flex; align-items:center; gap:14px; }

/* language toggle */
.lang{ display:flex; align-items:center; gap:2px; background:rgba(8,11,26,.6); border:1px solid var(--line);
  border-radius:999px; padding:3px; }
.lang button{ font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--dim);
  padding:.34em .66em; border-radius:999px; transition:all var(--t); }
.lang button.active{ color:#05060e; background:linear-gradient(100deg,var(--accent),var(--accent-2)); }

.burger{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line);
  background:rgba(8,11,26,.6); flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.burger span{ width:18px; height:2px; background:var(--text); border-radius:2px; transition:var(--t); }

/* ============================================================
   HERO (landing)
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  padding:140px 0 90px; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-1; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.34;
  mask-image:linear-gradient(180deg,#000 30%, transparent 96%); filter:saturate(1.25); }
.hero-glow{ position:absolute; inset:0; z-index:-1;
  background:radial-gradient(800px 420px at 50% 18%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 70%); }
.hero-inner{ max-width:880px; }
.hero h1{ font-size:clamp(2.7rem,8vw,6rem); line-height:.96; letter-spacing:.01em; }
.hero h1 .stroke{ color:transparent; -webkit-text-stroke:1.5px var(--accent); text-shadow:0 0 30px color-mix(in srgb,var(--accent) 40%, transparent); }
.hero-tag{ font-size:clamp(1.05rem,2vw,1.4rem); color:var(--muted); margin:24px 0 36px; max-width:620px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-scroll{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:.7rem; letter-spacing:.25em; color:var(--dim); text-transform:uppercase; display:flex;
  flex-direction:column; align-items:center; gap:8px; }
.hero-scroll .mouse{ width:22px; height:34px; border:2px solid var(--line-2); border-radius:12px; position:relative; }
.hero-scroll .mouse::after{ content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:3px; height:7px; border-radius:2px; background:var(--accent); animation:scroll 1.6s var(--ease) infinite; }
@keyframes scroll{ 0%{opacity:0; top:6px} 40%{opacity:1} 100%{opacity:0; top:16px} }

/* marquee strip */
.marquee{ border-block:1px solid var(--line); background:rgba(8,11,26,.5); overflow:hidden; padding:14px 0; }
.marquee-track{ display:flex; gap:48px; white-space:nowrap; width:max-content; animation:marq 28s linear infinite;
  font-family:var(--font-pixel); font-size:.66rem; color:var(--dim); letter-spacing:.08em; }
.marquee-track span{ display:inline-flex; align-items:center; gap:48px; }
.marquee-track b{ color:var(--accent); }
@keyframes marq{ to{ transform:translateX(-50%) } }

/* ============================================================
   GAME SHOWCASE (alternating rows)
   ============================================================ */
.showcase{ display:flex; flex-direction:column; gap:clamp(56px,9vw,120px); }
.game-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.game-row:nth-child(even) .game-media{ order:2; }
.game-media{ position:relative; }
.game-media .frame{
  position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-2);
  box-shadow:0 30px 80px -30px #000, 0 0 0 1px rgba(255,255,255,.02) inset;
  aspect-ratio:16/10; background:var(--bg-2);
}
.game-media .frame img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.game-row:hover .frame img{ transform:scale(1.05); }
.game-media .glow{ position:absolute; inset:-2px; z-index:-1; border-radius:calc(var(--radius) + 4px);
  background:linear-gradient(120deg,var(--accent),var(--accent-2)); filter:blur(30px); opacity:.35; }
.game-media .float{ position:absolute; right:-18px; bottom:-26px; width:42%; filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));
  animation:bob 6s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(-14px) } }

.game-info .kicker{ font-family:var(--font-pixel); font-size:.6rem; color:var(--accent); letter-spacing:.1em; }
.game-info h3{ font-size:clamp(2rem,4vw,3.1rem); margin:14px 0 6px; }
.game-info .genre{ color:var(--muted); font-weight:600; letter-spacing:.04em; margin-bottom:18px; }
.game-info p{ color:var(--muted); margin-bottom:22px; max-width:52ch; }
.game-info .badges{ margin-bottom:26px; }
.game-actions{ display:flex; flex-wrap:wrap; gap:12px; }

/* ============================================================
   VALUES / why
   ============================================================ */
.values{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.value{
  padding:28px 24px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--panel); backdrop-filter:blur(8px); transition:transform var(--t), border-color var(--t);
}
.value:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.value .ico{ width:46px; height:46px; display:grid; place-items:center; border-radius:12px; margin-bottom:16px;
  background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent); }
.value .ico svg{ width:24px; height:24px; }
.value h4{ font-size:1.06rem; margin-bottom:8px; font-family:var(--font-body); font-weight:700; letter-spacing:0; }
.value p{ color:var(--muted); font-size:.92rem; }

/* ============================================================
   NEWS
   ============================================================ */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.news-card{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--panel-2);
  display:flex; flex-direction:column; transition:transform var(--t), border-color var(--t); }
.news-card:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.news-card .thumb{ aspect-ratio:16/9; overflow:hidden; }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.news-card:hover .thumb img{ transform:scale(1.06); }
.news-card .body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.news-card .meta{ font-size:.74rem; color:var(--accent); font-weight:600; letter-spacing:.04em; display:flex; gap:10px; }
.news-card h4{ font-family:var(--font-body); font-weight:700; font-size:1.1rem; letter-spacing:0; }
.news-card p{ color:var(--muted); font-size:.9rem; }
.news-card .more{ margin-top:auto; padding-top:10px; color:var(--text); font-weight:600; font-size:.88rem; }
.news-card .more::after{ content:' →'; color:var(--accent); }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band{ position:relative; border-radius:var(--radius); overflow:hidden; padding:clamp(40px,6vw,72px);
  border:1px solid var(--line-2); text-align:center;
  background:linear-gradient(120deg, rgba(46,230,255,.12), rgba(255,62,165,.12)); }
.cta-band::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--panel-2); }
.cta-band h2{ font-size:clamp(1.7rem,3.6vw,2.8rem); }
.cta-band p{ color:var(--muted); max-width:560px; margin:14px auto 28px; }
.cta-band .hero-cta{ justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ border-top:1px solid var(--line); background:rgba(5,6,13,.6); padding:64px 0 36px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
.footer .brand{ margin-bottom:16px; }
.footer p.about{ color:var(--muted); font-size:.92rem; max-width:34ch; }
.footer h5{ font-family:var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--dim); margin-bottom:16px; }
.footer ul li{ margin-bottom:10px; }
.footer ul a{ color:var(--muted); font-size:.92rem; transition:color var(--t); }
.footer ul a:hover{ color:var(--accent); }
.socials{ display:flex; gap:12px; margin-top:6px; }
.socials a{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center;
  color:var(--muted); transition:all var(--t); }
.socials a:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; }
.footer-bottom{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--dim); font-size:.84rem; }
.footer-legal{ flex-basis:100%; color:var(--dim); font-size:.72rem; opacity:.82; margin-top:4px; line-height:1.5; }

/* ============================================================
   GAME DETAIL PAGE
   ============================================================ */
.gpage-hero{ position:relative; min-height:92svh; display:flex; align-items:flex-end; padding:120px 0 64px; overflow:hidden; }
.gpage-hero .bg{ position:absolute; inset:0; z-index:-2; }
.gpage-hero .bg img{ width:100%; height:100%; object-fit:cover; }
.gpage-hero .bg::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,7,15,.55) 0%, rgba(6,7,15,.4) 40%, var(--bg) 96%); }
.gpage-hero .bg::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(700px 500px at 80% 30%, color-mix(in srgb,var(--accent) 24%, transparent), transparent 70%); z-index:1; }
.gpage-hero-inner{ position:relative; max-width:760px; }
.gpage-hero h1{ font-size:clamp(2.6rem,7vw,5.2rem); line-height:.95; margin:18px 0; }
.gpage-hero .genre{ color:var(--muted); font-size:1.05rem; font-weight:600; letter-spacing:.05em; }
.gpage-hero .badges{ margin:22px 0 30px; }
.gpage-hero .hero-cta{ display:flex; flex-wrap:wrap; gap:14px; }

.split{ display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(34px,6vw,72px); align-items:start; }
.prose p{ color:var(--muted); margin-bottom:18px; font-size:1.06rem; }
.prose p strong{ color:var(--text); }

.facts{ border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); backdrop-filter:blur(8px);
  padding:28px; position:sticky; top:90px; }
.facts h4{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:.1em; font-size:.8rem; color:var(--dim); margin-bottom:18px; }
.facts dl{ display:grid; grid-template-columns:auto 1fr; gap:12px 16px; }
.facts dt{ color:var(--dim); font-size:.86rem; }
.facts dd{ text-align:right; font-weight:600; font-size:.9rem; }

/* feature grid */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.feat{ padding:26px; border-radius:var(--radius); border:1px solid var(--line); background:var(--panel);
  transition:transform var(--t), border-color var(--t); }
.feat:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--accent) 45%, transparent); }
.feat .ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:16px;
  background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent); font-size:1.4rem; }
.feat h4{ font-family:var(--font-body); font-weight:700; font-size:1.1rem; margin-bottom:8px; letter-spacing:0; }
.feat p{ color:var(--muted); font-size:.92rem; }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; grid-auto-rows:140px; }
.gallery figure{ position:relative; overflow:hidden; border-radius:var(--radius-sm); border:1px solid var(--line);
  cursor:pointer; background:var(--bg-2); }
.gallery figure img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.gallery figure:hover img{ transform:scale(1.08); }
.gallery figure::after{ content:'⤢'; position:absolute; right:10px; bottom:8px; color:#fff; opacity:0; transition:opacity var(--t);
  font-size:1.1rem; text-shadow:0 1px 6px #000; }
.gallery figure:hover::after{ opacity:1; }
.g-wide{ grid-column:span 8; grid-row:span 2; }
.g-tall{ grid-column:span 4; grid-row:span 2; }
.g-sq{ grid-column:span 4; grid-row:span 2; }
.g-half{ grid-column:span 6; grid-row:span 2; }

/* lightbox */
.lightbox{ position:fixed; inset:0; z-index:500; background:rgba(3,4,10,.92); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center; padding:5vw; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:88vh; border-radius:12px; border:1px solid var(--line-2);
  box-shadow:0 40px 120px -20px #000; }
.lightbox .lb-close{ position:absolute; top:22px; right:26px; font-size:2rem; color:var(--muted); line-height:1; }
.lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.4rem; color:#fff; opacity:.7;
  padding:20px; transition:opacity var(--t); }
.lightbox .lb-nav:hover{ opacity:1; }
.lb-prev{ left:8px; } .lb-next{ right:8px; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }
.reveal.d4{ transition-delay:.32s }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .values{ grid-template-columns:repeat(2,1fr); }
  .news-grid{ grid-template-columns:1fr 1fr; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .split{ grid-template-columns:1fr; }
  .facts{ position:static; }
}
@media (max-width:860px){
  .nav-links{ position:fixed; inset:0 0 0 auto; width:min(320px,82vw); flex-direction:column; align-items:flex-start;
    gap:6px; padding:96px 24px 24px; background:rgba(8,10,22,.97); backdrop-filter:blur(18px);
    border-left:1px solid var(--line); transform:translateX(105%); transition:transform .35s var(--ease); }
  .nav-links.open{ transform:none; }
  .nav-links a{ width:100%; font-size:1.05rem; padding:.7em .8em; }
  .burger{ display:flex; }
  .game-row{ grid-template-columns:1fr; }
  .game-row:nth-child(even) .game-media{ order:0; }
  .game-media .float{ width:34%; }
  .gallery{ grid-auto-rows:110px; }
}
@media (max-width:620px){
  .values{ grid-template-columns:1fr; }
  .news-grid{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .gallery > figure{ grid-column:span 12 !important; grid-row:span 2 !important; }
  .hero{ padding-top:120px; }
}

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}