@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
 /* Heavy corporate graphite. No saturated colour on the page — apart
    from the four games' own. A colourful brand hue would compete. */
 --bg:#08090D; --bg-2:#0B0D12; --card:#101319; --raise:#151922;
 --line:#1B1F29; --line-2:#252A36;
 --text:#EDEFF4; --muted:#8B93A3; --dim:#5E6675;
 --primary:#F2F4F8; --on-primary:#08090D;
 --steel:139,147,163;
 /* The system fonts at the tail of the stack are for the language
    menu: the 日本語 / 中文 / 한국어 / हिन्दी names must render properly on a
    Latin page too. Latin letters always come from Inter — the tail
    does not change the look. */
 --font:'Inter',-apple-system,BlinkMacSystemFont,
  'Hiragino Sans','PingFang SC','Microsoft YaHei','Apple SD Gothic Neo',
  'Malgun Gothic','Nirmala UI','Noto Sans Devanagari',sans-serif;
 --display:'Space Grotesk','Inter',
  'Hiragino Sans','PingFang SC','Microsoft YaHei','Apple SD Gothic Neo',
  'Malgun Gothic','Nirmala UI','Noto Sans Devanagari',sans-serif;
 --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
 --t:.34s cubic-bezier(.22,.61,.36,1);
 --pad:clamp(20px,5vw,64px);
}

/* --- Font stack for the CJK and Devanagari pages --------------------
   Inter and Space Grotesk only cover Latin/Cyrillic; Japanese,
   Chinese, Korean and Hindi body text falls through to a system font
   here. Order matters: Chinese and Japanese share the same Han code
   points, so the page's own language font must come first for the
   glyphs to be drawn in that language's style. Latin pages are left
   alone — the selector only kicks in on the matching html[lang] page,
   and even there Latin letters still come from Inter/Space Grotesk
   first. */
html[lang="ja"]{
 --font:'Inter','Hiragino Sans','Yu Gothic','Meiryo','Noto Sans JP',sans-serif;
 --display:'Space Grotesk','Inter','Hiragino Sans','Yu Gothic','Meiryo','Noto Sans JP',sans-serif}
html[lang="zh"]{
 --font:'Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
 --display:'Space Grotesk','Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif}
html[lang="ko"]{
 --font:'Inter','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
 --display:'Space Grotesk','Inter','Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif}
html[lang="hi"]{
 --font:'Inter','Kohinoor Devanagari','Devanagari Sangam MN','Nirmala UI','Mangal','Noto Sans Devanagari',sans-serif;
 --display:'Space Grotesk','Inter','Kohinoor Devanagari','Devanagari Sangam MN','Nirmala UI','Mangal','Noto Sans Devanagari',sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
 font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
 text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* On corporate sites the body is not one wide column: the content
   stops at 1240 but section backgrounds run full width. */
.container{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* --- top bar: thin, sticky, a single rule --- */
.site-header{position:sticky;top:0;z-index:40;
 background:rgba(8,9,13,.72);backdrop-filter:saturate(150%) blur(14px);
 border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:28px;height:64px}
.nav .brand img{height:26px;display:block}
.nav .menu{margin-inline-start:24px}
.nav-links{display:flex;gap:28px}
.nav .lang{margin-inline-start:auto}
.nav-links a{color:var(--muted);font-size:13.5px;font-weight:500;
 letter-spacing:.2px;transition:color var(--t)}
.nav-links a:hover{color:var(--text)}
.nav-end{margin-inline-start:auto;display:flex;align-items:center;gap:12px}
.lang summary{list-style:none;cursor:pointer;font-size:13.5px;font-weight:500;
 color:var(--muted);padding:7px 2px;transition:color var(--t)}
.lang summary:hover{color:var(--text)}
.lang summary::-webkit-details-marker{display:none}
.lang-menu{position:absolute;inset-inline-end:0;margin-top:10px;
 background:var(--raise);border:1px solid var(--line-2);
 border-radius:var(--r-md);padding:6px;min-width:168px;
 box-shadow:0 24px 60px rgba(0,0,0,.6);z-index:50}
.lang-menu a{display:block;padding:9px 12px;border-radius:var(--r-sm);
 font-size:13.5px;color:var(--muted)}
.lang-menu a:hover{background:var(--card);color:var(--text)}
.lang-menu a.on{color:var(--text);font-weight:600}

/* The games dropdown. Its contents are generated from GAMES + SOON:
   a new game appears in the menu by itself. On narrow screens the
   plain links are hidden but this menu stays — it is the site's real
   content. */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;font-size:13.5px;
 font-weight:500;color:var(--muted);display:inline-flex;align-items:center;
 gap:6px;transition:color var(--t)}
.menu summary::-webkit-details-marker{display:none}
.menu summary::after{content:"";width:5px;height:5px;margin-top:-3px;
 border-inline-end:1.5px solid currentColor;
 border-block-end:1.5px solid currentColor;transform:rotate(45deg);
 transition:transform var(--t)}
.menu[open] summary,.menu summary:hover{color:var(--text)}
.menu[open] summary::after{transform:rotate(225deg);margin-top:2px}
.menu-panel{position:absolute;inset-inline-start:0;margin-top:12px;
 background:var(--raise);border:1px solid var(--line-2);
 border-radius:var(--r-md);padding:8px;min-width:262px;
 box-shadow:0 26px 64px rgba(0,0,0,.62);z-index:50}
.menu-panel a{display:flex;align-items:center;gap:12px;padding:9px 10px;
 border-radius:var(--r-sm);transition:background var(--t)}
.menu-panel a:hover{background:var(--card)}
.menu-panel img{width:34px;height:34px;border-radius:10px;flex:none}
.menu-text{min-width:0}
.menu-panel b{display:block;font-family:var(--display);font-size:12.5px;
 font-weight:700;letter-spacing:2.2px;line-height:1.2}
.menu-panel span{display:block;margin-top:3px;font-size:11px;
 font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
 color:var(--dim)}

/* --- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
 font-weight:600;font-size:14.5px;padding:13px 26px;border-radius:999px;
 transition:var(--t);border:1px solid transparent;cursor:pointer;
 white-space:nowrap}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{transform:translateY(-1px);
 box-shadow:0 10px 30px rgba(242,244,248,.16)}
.btn-ghost{border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:rgba(var(--steel),.55);background:var(--card)}
.btn-sm{padding:9px 18px;font-size:13px}

/* --- full-width cinemascope hero --- */
/* Rail, indicators and counters stacked: the height now lives on the
   slide itself (.hero-slide), not on the hero. */
.hero{position:relative;overflow:hidden;padding:104px 0 26px;
 background:
  radial-gradient(90% 70% at 50% -20%,rgba(var(--steel),.16),transparent 62%),
  linear-gradient(180deg,#0B0D12 0%,#08090D 70%)}
/* A grid in the background taken from the MANTIZ board: corporate but
   belonging to a games house. No colour, only light. */
.hero-grid-bg{position:absolute;inset:0;pointer-events:none;
 background-image:
  linear-gradient(rgba(var(--steel),.055) 1px,transparent 1px),
  linear-gradient(90deg,rgba(var(--steel),.055) 1px,transparent 1px);
 background-size:64px 64px;
 mask-image:radial-gradient(72% 62% at 50% 32%,#000 0%,transparent 78%);
 -webkit-mask-image:radial-gradient(72% 62% at 50% 32%,#000 0%,transparent 78%)}
/* The hero has four slides: the studio + three genres. With
   JavaScript off the rail stays horizontally scrollable and nothing
   is lost. */
.hero-stage{position:relative}
.hero-track{position:relative;z-index:1;display:flex;overflow-x:auto;
 scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.hero-track::-webkit-scrollbar{display:none}
.hero-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;
 display:flex;align-items:center;min-height:min(56vh,470px)}
/* The slide's own colour: the colour of the genre's game, at very low
   intensity. The brand chrome stays grey, the colour still comes from
   the game. */
.hero-wash{position:absolute;inset:0;pointer-events:none}
.hero-inner{position:relative;width:100%;display:grid;align-items:center;
 grid-template-columns:1.02fr .98fr;gap:clamp(24px,5vw,72px)}
.hero-copy{min-width:0}

/* The right side of the slide: the games of that genre. The same
   icons are used on the game cards, so the page stays consistent with
   itself. */
.hero-art{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.hero-chip{width:136px;border:1px solid var(--line);
 border-radius:var(--r-lg);padding:20px 12px 16px;text-align:center;
 transition:var(--t)}
.hero-chip:hover{border-color:var(--line-2);transform:translateY(-3px)}
.hero-chip img{width:56px;height:56px;border-radius:15px;
 box-shadow:0 10px 26px rgba(0,0,0,.5)}
.hero-art.one .hero-chip{width:200px;padding:30px 16px 24px}
.hero-art.one .hero-chip img{width:84px;height:84px;border-radius:22px}
.hero-art.one .hero-chip b{margin-top:18px;font-size:13px}
.hero-chip b{display:block;margin-top:13px;font-family:var(--display);
 font-size:11.5px;font-weight:700;letter-spacing:2.4px}
.hero-chip span{display:block;margin-top:5px;font-size:10.5px;
 font-weight:600;letter-spacing:1.4px;text-transform:uppercase;
 color:var(--dim)}

/* Square arrows: it advances on its own, but someone will want to go
   back and look. */
.hero-arrow{position:absolute;inset-block-start:50%;z-index:3;
 transform:translateY(-50%);
 width:44px;height:44px;border-radius:12px;cursor:pointer;
 border:1px solid var(--line-2);background:rgba(8,9,13,.66);
 backdrop-filter:blur(10px);color:var(--muted);
 display:grid;place-items:center;transition:var(--t);padding:0}
.hero-arrow:hover{color:var(--text);border-color:rgba(var(--steel),.65);
 background:rgba(17,22,33,.9)}
.hero-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;
 stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-arrow.prev{inset-inline-start:calc(max(0px,(100vw - 1240px)/2) + 8px)}
.hero-arrow.next{inset-inline-end:calc(max(0px,(100vw - 1240px)/2) + 8px)}
[dir="rtl"] .hero-arrow svg{transform:scaleX(-1)}
.hero-foot{position:relative;z-index:1}
/* The indicators are bars, not dots: easier to read on a corporate
   storefront, and the width also says which slide you are on. */
.hero-dots{display:flex;gap:8px;padding:26px 0 0}
.hero-dot{width:30px;height:3px;border-radius:2px;background:var(--line-2);
 border:0;padding:0;cursor:pointer;transition:var(--t)}
.hero-dot:hover{background:rgba(var(--steel),.6)}
.hero-dot[aria-current="true"]{background:var(--primary);width:52px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;
 font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
 color:var(--dim);margin:0 0 26px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--line-2)}
.hero h1,.hero .hero-title{font-family:var(--display);font-weight:700;
 font-size:clamp(38px,4.9vw,74px);line-height:1;letter-spacing:-1.8px;
 margin:0 0 24px;max-width:16ch}
.hero-lede{margin:0 0 38px;color:var(--muted);font-size:clamp(16px,1.5vw,19px);
 max-width:56ch;line-height:1.6}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* --- sections --- */
.section{padding:clamp(64px,9vw,116px) 0}
.section.tint{background:var(--bg-2);border-block:1px solid var(--line)}
/* On corporate sites a section heading is not centred: flush left,
   with a short description to its right. The eye flows down from the
   left. */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;
 gap:40px;flex-wrap:wrap;margin-bottom:44px}
.sec-head h2{font-family:var(--display);font-weight:700;
 font-size:clamp(26px,3.6vw,44px);line-height:1.06;letter-spacing:-1.2px;
 margin:0}
.sec-head p{margin:0;color:var(--muted);max-width:46ch;font-size:15.5px}
.sec-tag{display:block;font-size:11.5px;font-weight:700;letter-spacing:2.6px;
 text-transform:uppercase;color:var(--dim);margin-bottom:14px}

/* --- game shelf with a genre heading --- */
.cat{margin-top:64px}
.cat:first-of-type{margin-top:0}
.cat-head{display:flex;align-items:baseline;gap:16px;
 padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:28px}
.cat-head h3{font-family:var(--display);font-size:19px;font-weight:700;
 letter-spacing:-.3px;margin:0}
.cat-head .note{color:var(--dim);font-size:14px}
.cat-head .count{margin-inline-start:auto;font-size:11.5px;font-weight:700;
 letter-spacing:1.8px;color:var(--dim)}
.shelf{display:grid;gap:20px;
 grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
/* A genre with two games: on a wide screen auto-fill opens three
   columns and the two cards crowded to the left, leaving an empty
   column on the right. We switch to two equal columns — but if they
   simply split the shelf the cards come out bigger than those on the
   other shelves (measured: 546 px against 357 px). So the shelf is
   narrowed to the width of two cards and centred. On a shelf of three
   the card width is (shelf - 2*gap) / 3; two of those plus one gap
   makes (2*shelf - 20) / 3. Only at the widths where the others
   really do open three columns: below 940 px they drop to two as well
   and the shelf already splits evenly. */
.shelf.pair{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:940px){
 .shelf.pair{max-width:calc((200% - 20px) / 3);margin-inline:auto}
}
/* If a genre has a single game, one narrow card sits there orphaned;
   in that case the card lies down: image on the left, details on the
   right. */
.shelf.solo{grid-template-columns:1fr}
.shelf.solo .tile{flex-direction:row;align-items:stretch}
.shelf.solo .tile-art{aspect-ratio:auto;flex:0 0 38%;
 border-bottom:0;border-inline-end:1px solid var(--line)}
.shelf.solo .tile-body{padding:34px 36px;justify-content:center}
.shelf.solo .tile-body p{max-width:62ch}
.shelf.solo .tile-body .btn{align-self:flex-start}

/* Game card: a 4:3 image area on top, the details below. The whole
   card is a link; on hover the image grows slightly. */
.tile{position:relative;display:flex;flex-direction:column;
 background:var(--card);border:1px solid var(--line);
 border-radius:var(--r-lg);overflow:hidden;transition:var(--t)}
.tile:hover{border-color:var(--line-2);transform:translateY(-3px);
 box-shadow:0 22px 54px rgba(0,0,0,.5)}
.tile-art{position:relative;aspect-ratio:4/3;display:grid;place-items:center;
 overflow:hidden;border-bottom:1px solid var(--line)}
.tile-art img{width:84px;height:84px;border-radius:20px;
 transition:transform var(--t);
 box-shadow:0 14px 34px rgba(0,0,0,.45)}
.tile:hover .tile-art img{transform:scale(1.06)}
.tile-body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.tile-body h4{font-family:var(--display);margin:0;font-size:16px;
 font-weight:700;letter-spacing:3px}
/* Written with two classes so that its specificity does not stay
   equal even though it comes after .tile-body p: otherwise the genre
   label takes the body colour. */
.tile-body p.tile-genre{margin:7px 0 12px;font-size:11.5px;font-weight:600;
 letter-spacing:1.6px;text-transform:uppercase;color:var(--dim);flex:none}
.tile-body p{margin:0 0 18px;color:var(--muted);font-size:14px;
 line-height:1.6;flex:1}

/* Store buttons: icon + name, thin border. With no link yet the
   button is dimmed and not clickable — the design stays in place, and
   when a link appears only STORE_LINKS needs filling in. */
.stores{display:flex;gap:8px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:8px;flex:1 1 0;
 min-width:0;justify-content:center;
 border:1px solid var(--line-2);border-radius:999px;padding:9px 14px;
 font-size:12.5px;font-weight:600;color:var(--text);
 transition:var(--t);white-space:nowrap}
.store svg{width:14px;height:14px;flex:none;fill:currentColor}
.store:hover{border-color:rgba(var(--steel),.6);background:var(--raise)}
.store.soon{opacity:.4;pointer-events:none;border-style:dashed}
.shelf.solo .stores{max-width:420px}
.badge{position:absolute;inset-block-start:14px;inset-inline-start:14px;
 z-index:2;font-size:10.5px;font-weight:700;letter-spacing:1.6px;
 text-transform:uppercase;color:var(--text);
 background:rgba(8,9,13,.72);backdrop-filter:blur(6px);
 border:1px solid var(--line-2);border-radius:999px;padding:5px 11px}

/* --- corporate value rows: thin rules, not boxes --- */
.values{display:grid;gap:0;grid-template-columns:repeat(3,1fr);
 border-top:1px solid var(--line)}
.value{padding:34px 34px 34px 0;border-top:0;
 border-inline-end:1px solid var(--line)}
.value:last-child{border-inline-end:0}
.value:not(:first-child){padding-inline-start:34px}
.value .num{font-family:var(--display);font-size:12px;font-weight:700;
 letter-spacing:2px;color:var(--dim);margin-bottom:18px}
.value h3{margin:0 0 9px;font-size:17px;font-weight:700}
.value p{margin:0;color:var(--muted);font-size:14.5px}

/* --- contact: full width, quiet --- */
.cta{padding:clamp(56px,8vw,96px) 0;text-align:center}
.cta h2{font-family:var(--display);font-size:clamp(24px,3.4vw,38px);
 letter-spacing:-1px;margin:0 0 12px}
.cta p{margin:0 0 30px;color:var(--muted)}

/* --- footer: dense, corporate --- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);
 padding:64px 0 30px;font-size:14px}
.footer-grid{display:grid;gap:40px;
 grid-template-columns:1.6fr repeat(3,1fr)}
.footer-brand img{height:26px;margin-bottom:16px}
.footer-brand p{margin:0;color:var(--muted);max-width:34ch;font-size:14px}
.footer-col h4{margin:0 0 14px;font-size:11px;letter-spacing:2px;
 text-transform:uppercase;color:var(--dim);font-weight:700}
.footer-col a,.footer-col p{display:block;color:var(--muted);margin:0 0 10px}
.footer-col a:hover{color:var(--text)}
.footer-bottom{border-top:1px solid var(--line);margin-top:48px;
 padding-top:24px;display:flex;gap:18px;flex-wrap:wrap;
 color:var(--dim);font-size:13px}
.footer-bottom .sp{margin-inline-start:auto}

/* --- privacy / terms --- */
.doc{max-width:760px;padding:clamp(56px,8vw,96px) 0}
.doc h1{font-family:var(--display);font-size:clamp(28px,4vw,40px);
 letter-spacing:-1.2px;margin:0 0 10px}
.doc h2{font-family:var(--display);font-size:19px;margin:40px 0 10px;
 letter-spacing:-.3px}
.doc p{color:#C6CBD8}
.doc .meta{color:var(--dim);font-size:13px;margin-bottom:38px}
.doc ul{padding-inline-start:20px;color:#C6CBD8}

@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hero-track{scroll-behavior:auto}
}
@media(max-width:900px){
 /* On a narrow screen the right side squeezes the text; the slide
    drops to one column and the games move below the text. */
 .hero-inner{grid-template-columns:1fr;gap:30px}
 .hero-art{justify-content:flex-start}
 .hero-chip{width:114px;padding:16px 10px 13px}
 .hero-chip img{width:46px;height:46px}
}
@media(max-width:1020px){
 .footer-grid{grid-template-columns:1fr 1fr}
 .values{grid-template-columns:1fr}
 .value{padding:28px 0;border-inline-end:0;border-top:1px solid var(--line)}
 .value:not(:first-child){padding-inline-start:0}
 .value:first-child{border-top:0}
}
@media(max-width:680px){
 .shelf.pair{grid-template-columns:1fr}
 /* When the horizontal card splits in two on a narrow screen both
    columns stay narrow; it returns to the normal card layout. */
 .shelf.solo .tile{flex-direction:column}
 .shelf.solo .tile-art{aspect-ratio:4/3;flex:none;
  border-inline-end:0;border-bottom:1px solid var(--line)}
 .shelf.solo .tile-body{padding:20px 20px 22px}
}
@media(max-width:760px){
 .nav-links{display:none}
 .hero{min-height:auto;padding:84px 0 0}
 .hero-slide{min-height:auto}
 .hero-arrow{display:none}
 .hero-stat{padding:18px 0}
 .footer-grid{grid-template-columns:1fr}
 .sec-head{gap:16px}
}