/* Blackgems Global site styles. Desktop >= 961px, mobile <= 960px. Content width: 88vw; 1100px at 1250–1399; 1400px from 1591. */
:root {
  color-scheme: dark;
  --bg: #000;
  --fg: #fff;
  --key: #2f80e4;          /* Blackgems blue in place of reference green #00BF68 */
  --hover: #5aa9ff;        /* in place of #00EE81 */
  --pill: #404040;
  --navy: #0d2a5c;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --side: 6vw;
}
@media (min-width: 1250px) and (max-width: 1399px) { :root { --side: calc(50vw - 550px); } }
@media (min-width: 1591px) { :root { --side: calc(50vw - 700px); } }
@media (max-width: 960px) { :root { --side: 20px; } }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 500 20px/25px var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; font-feature-settings: "kern" 1; }
body.light { --bg: #fff; --fg: #000; color-scheme: light; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--hover); }
img, video, iframe { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 2000; background: #fff; color: #000; padding: 10px 16px; border-radius: 6px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.holder { padding: 0 var(--side); }
.webpage { padding-top: 120px; padding-bottom: 30px; }
.rows > * + * { margin-top: 72px; }
.gap20 > * + * { margin-top: 20px; }
.gap36 > * + * { margin-top: var(--gap, 36px); }
.cols { display: flex; gap: 20px; }
.cols > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 960px) {
  .cols.t { flex-direction: column; gap: 20px; }
  .cols.t36 { gap: 36px; }
  .cols.small-row { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .small-row > div:empty { display: none; }
}
.narrow { width: 70%; margin-inline: auto; text-align: center; }
@media (max-width: 960px) { .narrow { width: 100%; } }
.xl { font-size: 25px; line-height: 32px; }
@media (max-width: 960px) { .xl { font-size: 18px; line-height: 25px; } }
.lift-m { font-size: 35px; line-height: 37px; }
.lift-s { font-size: 25px; line-height: 32px; }
@media (max-width: 960px) { .lift-m { font-size: 24px; line-height: 27px; } .lift-s { font-size: 18px; line-height: 25px; } }

/* Buttons */
.bg-button { display: inline-block; width: fit-content; background: var(--key); color: #fff !important; padding: 5px 20px 10px; border-radius: 6px; border: 0; font: inherit; cursor: pointer; }
.bg-button:hover, a:hover > .bg-button, .unit:hover .bg-button { background: var(--hover); }
.store-icons { display: flex; gap: 10px; align-items: flex-end; }
.store-icons a { display: block; color: var(--fg); }
.store-icons svg { fill: currentColor; height: 50px; width: auto; display: block; }
.store-icons a:hover { color: var(--hover); }

/* Header: fixed with gradient fade on desktop, scrolls away on mobile */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 16px 0 80px; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 40%, transparent); }
body.light .header { background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .3) 40%, transparent); }
.header .holder { display: flex; align-items: flex-start; pointer-events: all; }
.header-logo { transition: opacity .4s; display: flex; align-items: center; gap: 10px; margin-top: -3px; font-weight: 800; font-size: 22px; letter-spacing: .06em; line-height: 40px; white-space: nowrap; }
.header-logo img { width: 40px; height: 40px; border-radius: 50%; }
.header-logo .logo-t { display: block; }
.header-logo .logo-t span { display: block; font-weight: 500; opacity: .7; }
.header-links { flex-grow: 1; text-align: right; font-size: 18px; line-height: 25px; }
.header-links a { margin-left: 10px; }
.lang { background: none; border: 0; padding: 0; margin-left: 18px; font: inherit; color: inherit; cursor: pointer; opacity: .7; }
.lang:hover { color: var(--hover); opacity: 1; }
@media (max-width: 960px) {
  .header { position: absolute; }
  .header .holder { flex-direction: column; }
  .header-logo { font-size: 16px; line-height: 28px; margin-top: -7px; }
  .header-logo img { width: 28px; height: 28px; }
  .header-links { text-align: left; margin-top: 5px; }
  .header-links a { margin: 0 7px 0 0; }
  .lang { margin-left: 0; }
}

/* Footer: credit | 3x2 link grid | store icons */
.footer { display: flex; align-items: center; gap: 0; margin-top: 72px; }
.footer-copy { flex-grow: 2; font-size: 13px; line-height: 20px; padding-top: 4px; }
.footer-copy b { display: block; font-size: 16px; letter-spacing: .06em; margin-bottom: 9px; }
.footer-links { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); column-gap: 22px; row-gap: 5px; font-size: 18px; line-height: 20px; margin-right: 26px; }
.footer-stores { display: grid; grid-template-columns: repeat(2, auto); column-gap: 10px; align-items: baseline; margin-top: -4px; }
.footer-stores a { color: var(--fg); }
.footer-stores svg { fill: currentColor; height: 50px; width: auto; display: block; }
.footer-stores a:hover { color: var(--hover); }
@media (max-width: 960px) {
  .footer { flex-wrap: wrap; align-items: flex-start; }
  .footer-links { grid-template-columns: 1fr; grid-auto-flow: initial; grid-template-rows: none; font-size: 25px; line-height: 25px; row-gap: 15px; flex-grow: 1; }
  .footer-copy { order: 3; width: 100%; margin-top: 47px; }
  .footer-stores { grid-template-columns: 1fr; margin-top: auto; margin-bottom: -1%; }
  .footer-stores svg { width: 57px; height: auto; }
}

/* ---------- Home hero: black sheet with white title in multiply over moving game art ---------- */
.hero { position: relative; margin: 0 calc(-1 * var(--side)); padding: 0 var(--side); display: flex; flex-direction: column; align-items: center; }
.hero-top { position: relative; width: 100%; display: flex; justify-content: center; }
.hero-stage { position: relative; width: 90%; aspect-ratio: 16 / 9; overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: slide 21s infinite; }
@keyframes slide { 0% { opacity: 0; transform: scale(1.12); } 3%, 14.3% { opacity: 1; } 17.3% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
.hero-title { position: absolute; inset: 0; z-index: 100; background: #000; color: #fff; mix-blend-mode: multiply; display: flex; justify-content: center; align-items: center; }
.hero-title h1 { font-size: 20vw; line-height: 77%; letter-spacing: -.07em; text-align: center; font-weight: 800; margin-left: -.07em; }
@media (min-width: 1250px) and (max-width: 1399px) { .hero-title h1 { font-size: 250px; } }
@media (min-width: 1591px) { .hero-title h1 { font-size: 320px; } }
.hero-icons { position: absolute; top: -5%; left: 0; width: 100%; height: 110%; z-index: 100; pointer-events: none; }
.hero-icons img { position: absolute; width: 10.5%; aspect-ratio: 1; border-radius: 23%; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6); }
.hero-intro { position: relative; z-index: 200; margin-top: 36px; }
@media (max-width: 960px) { .hero-icons { display: none; } .hero-title h1 { margin-left: -.08em; } }

/* ---------- Cards (.index-unit) ---------- */
.unit { position: relative; display: flex; flex-direction: column; border-radius: 30px; height: 430px; padding: 25px; background: var(--key) center / cover no-repeat; overflow: hidden; color: #fff; isolation: isolate; }
.unit:hover { color: #fff; }
.unit.hero-unit { height: 645px; }
.unit-label { font-size: 18px; line-height: 25px; }
.unit-title { font-size: 50px; line-height: 90%; letter-spacing: -.03em; font-weight: 650; margin: 0 0 25px -.05em; }
.c-center { justify-content: center; align-items: center; text-align: center; }
.c-top-center { align-items: center; text-align: center; }
.c-bottom-left { justify-content: flex-end; }
.c-bottom-center { justify-content: flex-end; align-items: center; text-align: center; }
.c-top-bottom { justify-content: space-between; align-items: center; text-align: center; }
.unit.c-top-bottom { height: 400px; }
.hero-unit .bg-button { margin-top: -140px; }
.black { color: #000; }
.unit.black:hover { color: #000; }
.unit .shade { position: absolute; inset: 0; z-index: -1; }
@media (max-width: 960px) {
  .unit, .unit.hero-unit { border-radius: 20px; height: 335px; padding: 15px; }
  .unit-title { font-size: 30px; }
  .unit.c-top-bottom { height: 335px; }
  .hero-unit .bg-button { margin-top: -50px; }
}

/* Careers card: rotating colour field + giant filled title */
.careers-unit { background: #0e8ecc; color: #000; }
.careers-unit .rot { position: absolute; width: 130%; left: -15%; top: 50%; aspect-ratio: 1; translate: 0 -50%; z-index: -1; background: conic-gradient(from 0deg, #2f80e4, #22c3c3, #7fd6ff, #0d2a5c, #2f80e4); animation: spin 30s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.careers-title { font-size: 170px; line-height: 54%; letter-spacing: -.06em; font-weight: 650; margin: -10px 0 20px; padding: 30px; background: linear-gradient(180deg, #061325 25%, #0d2a5c 60%, #1f4f9a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.careers-unit .bg-button { background: #000; }
.careers-unit:hover .bg-button { background: #0d014d; }
@media (max-width: 960px) { .careers-title { font-size: 132px; } }

/* Contact card: giant gradient glyph */
.contact-unit { background: #0d004d; }
.big-glyph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -53%); font-size: 460px; line-height: 1em; padding: .5vw; font-weight: 650; z-index: -1; letter-spacing: -.06em;
  background: linear-gradient(0deg, #0d004d 10%, #0d2a5c 35%, #2f80e4 50%, #8cc4ff 65%, #fff 82%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Games page ---------- */
.page-title h1 { font-size: 140px; line-height: 140px; letter-spacing: -.03em; font-weight: 800; }
@media (max-width: 960px) { .page-title h1 { font-size: 32px; line-height: 32px; } .page-title { margin-bottom: 40px; } }
.rows > .filters { position: sticky; top: 80px; z-index: 1000; margin-top: 36px; }
.filters a:hover { color: var(--hover); }
.filters a.on { background: var(--key); }
.filters a { display: inline-block; background: var(--pill); border-radius: 20px; padding: 2px 15px 5px; font-size: 18px; line-height: 25px; margin: 0 3px 3px 0; white-space: pre; color: #fff; }
@media (max-width: 960px) {
  .rows > .filters { top: 20px; margin-inline: -20px; padding: 0 20px 0 15px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
}
h2.h2 { font-size: 70px; line-height: 70px; letter-spacing: -.03em; font-weight: 650; }
h2.h2-50 { font-size: 50px; line-height: 55px; font-weight: 500; }
@media (max-width: 960px) { h2.h2 { font-size: 40px; line-height: 45px; } h2.h2-50 { font-size: 27px; line-height: 27px; } }
.g-unit { padding: 20px; }
.feat-title { font-size: 60px; line-height: 52px; margin-bottom: 0; }
@media (max-width: 960px) { .feat-title { font-size: 34px; line-height: 32px; } }
.g-unit .unit-label { font-size: 14px; }
.g-unit .unit-title { font-size: 40px; line-height: 36px; margin-bottom: 10px; }
.g-unit .store-icons svg { height: 50px; }
@media (max-width: 960px) {
  .small-featured { display: flex; gap: 20px; overflow-x: auto; margin: 0 -20px; padding: 0 20px; scrollbar-width: none; }
  .small-featured::-webkit-scrollbar { display: none; }
  .small-featured > * + * { margin-top: 0; }
  .two-units { display: contents; }
  .small-featured .g-unit { min-width: 280px; width: 280px; height: 280px; border-radius: 20px; padding: 15px; flex: none; }
}
.game { display: block; }
.game-shot { width: 100%; aspect-ratio: 1100 / 1989; object-fit: cover; border-radius: 40px; margin-bottom: 20px; }
.game-about { display: flex; align-items: flex-start; }
.game-icon { width: 80px; height: 80px; border-radius: 20px; margin-right: 15px; flex: none; }
.game-name { font-size: 29px; line-height: 30px; font-weight: 650; margin: 5px 0 10px; }
.game-name a:hover { color: var(--hover); }
.game.small .game-about { display: block; }
.game.small .game-icon { width: 100%; height: auto; aspect-ratio: 1; border-radius: 4vw; margin: 0 0 20px; }
.game.small .game-name { font-size: 18px; line-height: 20px; margin: 0 0 12px; }
@media (max-width: 960px) { .game.small .game-icon { border-radius: 12vw; } }
.casual-panel { padding: 20px 20px 50px; background: #ff80d4; border-radius: 50px; margin-inline: -20px; color: #000; }
.casual-panel .store-icons a { color: #000; }
.casual-panel .store-icons a:hover, .casual-panel a:hover { color: var(--hover); }

/* ---------- Game detail ---------- */
.detail { position: relative; }
.detail-art { position: absolute; top: 0; left: 0; right: 0; z-index: -1; pointer-events: none; will-change: transform, opacity; }
.detail-art img { width: 100%; aspect-ratio: 1024 / 500; object-fit: cover; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
@media (max-width: 960px) { .detail-art img { aspect-ratio: 1 / 1; } }
.detail-spacer { height: 0; padding-bottom: 35%; margin-bottom: 72px; }
.video { position: relative; padding-bottom: 56.25%; background: #000; overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.keyart { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.game-title { margin-top: 31px; }
.game-title h1 { font-size: 70px; line-height: 65px; font-weight: 650; letter-spacing: -.05em; word-spacing: -.1em; margin-left: -.07em; max-width: calc(60.5vw - 5.625px + .07em); }
@media (min-width: 1250px) and (max-width: 1399px) { .game-title h1 { max-width: calc(750.625px + .07em); } }
@media (min-width: 1591px) { .game-title h1 { max-width: calc(956.875px + .07em); } }
.game-title .lift-s { color: var(--key); margin-top: 12px; }
.detail-head > .lift-m { margin-top: 22px; }
.detail-head > .game-buttons { margin-top: 20px; }
@media (max-width: 960px) {
  .game-title { margin-top: 23px; }
  .game-title h1 { font-size: 32px; line-height: 32px; margin-left: -.08em; max-width: none; }
  .game-title .lift-s { margin-top: 9px; }
  .detail-head > .lift-m { margin-top: 12px; }
}
.game-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 960px) { .game-buttons { flex-direction: column; align-items: stretch; text-align: center; } }
.game-button { display: inline-block; position: relative; padding: 7px 15px 11px 47px; border-radius: 6px; font-size: 25px; line-height: 32px; background: var(--key); color: #fff !important; white-space: nowrap; }
.game-button:hover { background: var(--hover); }
.game-button > span { position: relative; }
.game-button svg { width: 25px; height: 25px; fill: #fff; position: absolute; left: -31px; top: 4px; }
.gallery h2 { margin-left: -.07em; }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }
.shots img { width: 100%; aspect-ratio: 506 / 900; object-fit: cover; }
.press-links { margin-top: 20px; font-size: 20px; line-height: 25px; }
.press-links a { display: inline-block; margin-right: 15px; color: var(--key); }
.press-links a:hover { color: var(--hover); }
@media (max-width: 960px) { .shots { grid-template-columns: 1fr 1fr; margin-top: 24px; } .gallery h2 { margin-left: -.08em; } }
.see-also { display: flex; gap: 20px; background: #222226; border-radius: 30px; padding: 20px; }
.see-also-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.see-also h2 { margin-left: -.07em; }
.see-also-desc { margin-top: 23px; font-size: 20px; line-height: 25px; }
.see-also-game { display: flex; gap: 18px; margin-top: 25px; align-items: flex-start; }
.see-also-game > a { flex: none; }
.see-also-icon { width: 120px; height: 120px; border-radius: 22px; display: block; }
.see-also-name { color: var(--key); margin-top: -4px; font-size: 20px; line-height: 25px; }
.see-also-name a:hover { color: var(--hover); }
.see-also-genre { color: #999; font-size: 16px; line-height: 18px; margin-top: 1px; }
.see-also .store-icons { margin-top: 25px; }
.see-also-media { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }
.see-also-media img { width: 400px; height: 600px; object-fit: cover; border-radius: 20px; }
@media (max-width: 960px) {
  .see-also { flex-direction: column; gap: 0; padding-bottom: 56px; }
  .see-also h2 { margin-left: -.08em; }
  .see-also-desc { margin-top: 15px; }
  .see-also-game { margin-top: 19px; }
  .see-also-media { display: none; }
}

/* ---------- Careers (light) ---------- */
.join-hero { position: relative; text-align: center; }
.join-caption { position: absolute; top: 58px; left: calc(50% - 30px); transform: translateX(-50%); margin: 0; z-index: 2; font-size: 16px; line-height: 18px; }
@media (max-width: 960px) { .join-caption { top: 0; left: 50%; } }
.join-hero h1 { font-size: 320px; line-height: 172px; letter-spacing: -20px; font-weight: 800; padding: 50px; margin: -50px; background: url(/assets/join-texture.webp) bottom center / contain; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (max-width: 960px) { .join-hero h1 { font-size: 160px; line-height: 90px; letter-spacing: -13px; padding: 20px; margin: -20px; } }
.lead-cta { display: flex; gap: 20px; align-items: center; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.lead-cta .arrow:hover { color: var(--hover); }
@media (max-width: 960px) { .lead-cta { flex-direction: column; gap: 30px; } }
.xxxxl { font-size: 120px; line-height: .8em; font-weight: 650; word-spacing: -.15em; letter-spacing: -.03em; text-align: center; }
@media (max-width: 960px) { .xxxxl { font-size: 70px; } }
.marquee-wrap { overflow: hidden; margin: 0 calc(-1 * var(--side)); display: flex; justify-content: center; }
.marquee { display: flex; gap: 20px; width: max-content; flex: none; will-change: transform; }
.stack { position: relative; }
.stack-card { position: sticky; }
.stack-card > div { border-radius: 20px; overflow: hidden; }
.stack-card img { width: 100%; aspect-ratio: 1024 / 500; object-fit: cover; }
.job-tag { padding: 30px; margin: -30px; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.mail-card { background: #ebeff5; border-radius: 30px; padding: 40px; text-align: center; }
.mail-card .mail, .mail { font-weight: 650; user-select: all; overflow-wrap: anywhere; }

/* ---------- Contacts ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px 20px; }
.contact-grid .caption { overflow-wrap: anywhere; }
.contact-grid h3 { font-size: 20px; line-height: 25px; font-weight: 800; margin-bottom: 16px; }
.contact-grid .caption { font-size: 16px; line-height: 1.2; }
.contact-grid a:hover .caption { color: var(--hover); }
.heading-1 { font-size: 50px; line-height: 55px; font-weight: 800; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; gap: 70px; } .heading-1 { font-size: 32px; line-height: 32px; } .blank { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-slides img:first-child { opacity: 1; }
}

/* =====================================================================
   MOBILE (<= 960px): reference values; only deviation = game cards keep the full key art (2.05:1)
   ===================================================================== */
@media (max-width: 960px) {
  .cols.t > *, .cols.t36 > * { flex: none; }            /* flex-basis 0 collapses stacked cards */
  .unit.art .unit-label { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
  .careers-title { font-size: 132px; }
  .big-glyph { font-size: 340px; }
}
.unit.art.feat-hero { height: 430px; aspect-ratio: auto; }
.g-unit::before { content: ""; position: absolute; inset: 40% 0 0; z-index: -1; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }  /* our key art has no empty area for the title */

/* ===================== 1:1 pass 2: measured against reference by 7 audit agents ===================== */
/* header + footer (cmp/chrome) */
.header { line-height: 27px; }
.header-logo { height: 39px; margin: -1px 0 -8px; gap: 8px; align-items: center; font-size: 18px; line-height: 18px; letter-spacing: .06em; }
.header-logo img { width: 39px; height: 39px; }
.header-logo .logo-t { display: block; }
.header-logo .logo-t span { display: block; font-weight: 500; opacity: .7; }
.lang { margin-left: 10px; opacity: 1; }
.lang:hover { opacity: 1; }
@media (max-width: 960px) {
  .header-logo { height: 27px; margin: 1px 0 2px; gap: 6px; font-size: 12.5px; line-height: 12.5px; }
  .header-logo img { width: 27px; height: 27px; }
  .header-links { margin-top: 5px; }
  .lang { margin-left: 0; }
  .header-logo:hover { color: inherit; }
}
.footer-links { flex-grow: 1; justify-content: flex-start; }
.footer-copy + .footer-links { flex-grow: 0; }
.footer-copy { height: 46px; }
.footer-copy b { line-height: 19px; margin-bottom: 5px; }
.footer-stores a { padding-bottom: 3px; }
@media (max-width: 960px) {
  .footer { margin-top: 108px; align-items: center; }
  .footer-stores a { padding-bottom: 6px; }
  .footer-stores a + a svg { transform: translateY(4px); }
  .footer-copy + .footer-links { flex-grow: 1; }
  .footer-copy { height: auto; }
}

/* home desktop + mobile (cmp/homedesk, cmp/homemob) */
.hero-title h1 { font-weight: 650; }
.hero-icons { top: -5%; left: calc(-1 * var(--side)); width: calc(100% + 2 * var(--side)); height: auto; overflow: hidden; }
.hero-icons-in { position: relative; width: 110%; max-width: 1750px; left: 50%; transform: translateX(-50%); aspect-ratio: 2206 / 1142; }
.hero-icons img { width: 9.97%; height: auto; border-radius: 23%; box-shadow: none; }
.hero-intro { margin-top: 0; }
.hero-intro p { max-width: calc(60.5vw - 5.625px); margin: -9px 0 -6px -.07em; }
@media (min-width: 1250px) and (max-width: 1399px) { .hero-intro p { max-width: 750.625px; } }
@media (min-width: 1591px) { .hero-intro p { max-width: 956.875px; } }
.unit.c-top-bottom { height: 430px; }
.careers-unit:hover { color: #000; }
.hero-unit { --key: #ee3a86; --hover: #ff1a75; }   /* per-game button colour, like the reference pink Barbie button */
@media (min-width: 961px) { .hero-unit .bg-button { margin-top: -80px; translate: 24px 0; } }
.careers-unit .rot { background: url(/assets/careers-bg.webp) center / cover; }
.careers-title { background: url(/assets/careers-title.webp) 50% 30% / cover; -webkit-background-clip: text; background-clip: text; }
.big-glyph { letter-spacing: normal; transform: translate(-50%, -45%); background: linear-gradient(0deg, #0d004d 10%, #0d2a5c 35%, #2f80e4 50%, #8cc4ff 60%, #fff 80%); -webkit-background-clip: text; background-clip: text; }
.unit.art { background-position: var(--pos, center); }
@media (max-width: 960px) {
  .hero-unit .bg-button { margin-top: 20px; }
  .hero-intro.narrow { width: auto; }
  .hero-intro p { max-width: none; margin-left: -.08em; }
  .unit.art:not(.g-unit) { height: 335px; aspect-ratio: auto; }
  .unit.art { background-position: var(--mpos, var(--pos, center)); }
  .unit.m-tc { justify-content: flex-start; }
  .cols.t { max-width: calc(100vw - 42px); }
  .big-glyph { transform: translate(-50%, -43%); }
}
/* games page (cmp/games) */
.page-title h1 { font-weight: 650; margin: -23px 0 -5px -.07em; }
.page-title p { margin: 28px 0 -10px -.07em; }
.filters + .gap20 > .h2-50 { margin: -10px 0 -8px -.07em; }
h2.h2 { padding-top: 4px; }
.feat-hero { padding: 20px; }
.feat-hero .unit-label { font-size: 14px; }
.unit-title.feat-title { margin-bottom: 10px; }
.feat-hero:hover { color: var(--hover); }
.g-unit .store-icons { padding-bottom: 5px; }
.game .store-icons { padding-bottom: 3px; }
.game:not(.small) .game-icon { margin-bottom: 20px; }
.game-name { margin: -4px 0 4px -.07em; }
.game.small .game-name { margin: -4px 0 6px -.07em; }
.casual-panel { color: inherit; }
.casual-panel .store-icons a { color: var(--fg); }
@media (max-width: 960px) {
  .games-page { padding-bottom: 50px; }
  .page-title { margin-bottom: 0; }
  .page-title h1 { letter-spacing: -.05em; margin: -6px 0 -8px -.08em; }
  .page-title p { margin-left: -.08em; }
  .filters + .gap20 > .h2-50 { margin: -12px 0 -6px -.08em; }
  .gap36 > h2.h2 + * { margin-top: 18px; }
  .feat-hero { padding: 15px; }
  .feat-title { font-size: 60px; line-height: 52px; }
  .small-featured { padding-bottom: 20px; }
  .game-name, .game.small .game-name { margin-left: -.08em; }
}
/* careers (cmp/careers) */
.join-hero { display: flex; flex-direction: column; padding-top: 72px; }
.join-hero h1 { font-weight: 650; }
.join-caption { margin-top: -4px; }
.lead-cta { margin-top: 40px; }
.lead-cta .arrow { color: var(--key); font-weight: 500; }
h2.xxxxl { margin-left: -.07em; }
@media (max-width: 960px) { h2.xxxxl { margin-left: -.08em; } }
.job-tag { padding-left: calc(30px - .07em); }
.looking { margin-inline: calc(-1 * var(--side)); padding-inline: var(--side); overflow: hidden; }
.looking > * + * { margin-top: 0; }
.marquee-wrap { overflow: visible; }
.ready > .caption { font-size: 16px; line-height: 18px; margin-top: 26px; }
.ready > .lead-cta { margin-top: 72px; }
.cta-l { font-size: 50px; line-height: 45px; padding: 14px 20px 20px; }
@media (max-width: 960px) { .cta-l { font-size: 27px; line-height: 30px; } }

/* contacts (cmp/contacts) */
.heading-1 { font-size: 70px; line-height: 65px; font-weight: 650; letter-spacing: -.05em; margin: -23px 0 -5px -.07em; }
.contacts .gap36 { --gap: 42px; }
.contacts .lift-s { margin-bottom: -10px; margin-left: -.05em; }
.contact-grid { gap: 72px 20px; }
.contact-grid h3 { color: var(--fg); margin: -9px 0 -6px -.05em; }
.contact-grid .caption { line-height: 18px; margin: 12px 0 -5px -.05em; }
.contact-grid a .caption { color: var(--key); }
@media (min-width: 961px) { .contacts .cols.t > .rows { min-width: 500px; } }
@media (max-width: 960px) {
  .heading-1 { font-size: 32px; line-height: 32px; margin: -6px 0 -8px -.08em; }
  .contacts .gap36 { --gap: 19px; }
  .contacts .lift-s { margin-left: -.08em; }
  .contact-grid { gap: 70px; }
  .contacts .cols.t > .rows { margin-bottom: 36px; }
}
b, strong { font-weight: 800; }

/* ===================== Owner 10/10: game-card label + button in ONE corner (bottom-right: free on all 7 arts), raised so they never sink into the art ===================== */
.unit.art:not(.g-unit) { justify-content: flex-end; align-items: flex-end; text-align: right; gap: 8px; }
.unit.art:not(.g-unit) .bg-button { margin: 0 !important; translate: none !important; }
.unit.art .unit-label { display: inline-block; width: fit-content; padding: 3px 12px 5px; border-radius: 20px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; text-shadow: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.unit.art .bg-button { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 8px 22px rgba(0, 0, 0, .4); }
.g-unit .unit-title { text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.g-unit .store-icons svg { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
@media (max-width: 960px) {
  .unit.art:not(.g-unit) { justify-content: flex-end; }
  .unit.art .unit-label { font-size: 14px; line-height: 18px; padding: 3px 10px 4px; }
}
.unit.art:not(.g-unit) { background-position: var(--mpos, var(--pos, center)); }  /* keep each baked-in logo inside 2-up cards too */
/* games page cards follow the same corner: label, title, store icons stacked bottom-right on raised dark glass */
.unit.art.g-unit, .unit.art.feat-hero { justify-content: flex-end; align-items: flex-end; text-align: right; gap: 8px; }
.g-unit::before { display: none; }
.unit.art .unit-title.feat-title, .unit.art.g-unit .unit-title { margin: 0; padding: 6px 14px 10px; border-radius: 14px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); text-shadow: none; }
.unit.art.g-unit .store-icons { padding: 6px 12px; border-radius: 14px; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.unit.art.g-unit .store-icons svg { height: 36px; filter: none; }
@media (max-width: 960px) {
  .unit.art .unit-title.feat-title { font-size: 32px; line-height: 32px; }
  .unit.art.g-unit .unit-title { font-size: 24px; line-height: 26px; padding: 4px 12px 7px; }
  .unit.art.g-unit .store-icons svg { height: 30px; }
}
@media (max-width: 960px) { .unit.art.feat-hero { background-position: var(--mpos, center); } }
.unit.art .unit-label, .unit.art .unit-title, .unit.art .bg-button, .unit.art .store-icons { text-align: center; justify-content: center; }  /* owner: text centred inside each chip/button */
/* reveal (site.js): every block fades/slides in each time it enters, from below when scrolling down, from above when scrolling up */
.rv { opacity: 0; transform: translateY(70px) scale(.96); transition: opacity .7s ease var(--rv-d, 0ms), transform .9s cubic-bezier(.2, .8, .2, 1) var(--rv-d, 0ms); }
.rv.from-top { transform: translateY(-70px) scale(.96); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }
/* owner: button text centred. the reference 5/10 padding was tuned for Atyp's tall descender; Inter sits higher, so balance it (height unchanged) */
.bg-button { padding-top: 7px; padding-bottom: 8px; text-align: center; }
.game-button { padding-top: 9px; padding-bottom: 9px; }
.cta-l { padding-top: 16px; padding-bottom: 18px; }
/* game detail: store numbers */
.stats { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: 36px; }
.stat b { display: block; font-size: 70px; line-height: 65px; font-weight: 650; letter-spacing: -.05em; margin-left: -.05em; }
.stat .star { color: #ffc93c; font-size: .6em; vertical-align: .45em; margin-left: .08em; }
.stat > span { display: block; margin-top: 8px; font-size: 16px; line-height: 20px; opacity: .7; }
.stats-note { margin-top: 14px; font-size: 13px; line-height: 18px; opacity: .45; }
@media (max-width: 960px) {
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; margin-top: 28px; }
  .stat b { font-size: 44px; line-height: 44px; }
  .stat > span { font-size: 14px; line-height: 18px; }
}
.stat .star { vertical-align: baseline; position: relative; top: -.55em; line-height: 0; }
/* Inter is wider-spaced than Atyp at -.05em/-.1em: words ran together ("HoleEater:FeastFrenzy") */
.game-title h1, .heading-1 { letter-spacing: -.03em; word-spacing: 0; }
/* game detail: full store description */
.about-game .h2-50 { margin-left: -.07em; }
.store-desc { max-width: 880px; margin-top: 32px; font-size: 20px; line-height: 29px; color: rgba(255, 255, 255, .88); }
.store-desc p + p, .store-desc p + ul, .store-desc ul + p { margin-top: 16px; }
.store-desc ul { margin: 10px 0 0; padding-left: 1.2em; }
.store-desc li + li { margin-top: 6px; }
.store-desc li::marker { color: var(--key); }
@media (max-width: 960px) { .store-desc { margin-top: 24px; font-size: 17px; line-height: 25px; } .about-game .h2-50 { margin-left: -.08em; } }
.header-links a, .lang { white-space: nowrap; display: inline-block; }  /* 6 nav items: wrap between items, never inside one */
.store-desc .dh { font-weight: 650; color: #fff; margin-top: 22px; } .store-desc .dh + ul { margin-top: 8px; }
/* detail top, owner pick A: one full-bleed key art fading into black, title right under it */
.detail-art img { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.detail-spacer { padding-bottom: 42%; }
.detail-head > .game-title:first-child { margin-top: 0; }
@media (max-width: 960px) { .header-links { font-size: 16px; } .header-links a { margin-right: 6px; } }  /* 6 nav items on one line at 360-390px */
@media (max-width: 960px) { .header-links a { margin-right: 5px; } } @media (max-width: 380px) { .header-links { font-size: 14.5px; } .header-links a { margin-right: 4px; } }
@media (max-width: 960px) { .join-hero h1 { font-size: 32vw; line-height: 18vw; letter-spacing: -.07em; } }  /* "Team up" is wider than the old title */
@media (max-width: 960px) { .lead-cta .arrow { font-size: 17px; overflow-wrap: anywhere; max-width: 100%; } }
/* ===================== Audit fixes 12/10 ===================== */
/* 1. big headings: words kept apart, Vietnamese stacked marks (ể ậ ặ ế) get room and are never clipped */
.xxxxl { word-spacing: 0; }
html[lang=vi] .xxxxl { line-height: 1.08em; }
html[lang=vi] .careers-title { line-height: .98; padding: 40px 30px 30px; }
html[lang=vi] .careers-title { font-size: 130px; margin-block: -20px 0; }
@media (min-width: 961px) and (max-width: 1100px) { html[lang=vi] .careers-title { font-size: 11vw; } }
@media (max-width: 960px) { html[lang=vi] .careers-title { font-size: 92px; padding-top: 30px; } }
html[lang=vi] .join-hero h1[data-i18n], html[lang=vi] .join-hero h1[data-i18n-html] { line-height: .95em; }  /* only once the title is translated */
.looking { overflow: visible; overflow-x: clip; padding-top: .3em; }
/* 2. game detail: art and spacer share one formula (art height = full width x ratio), content starts where the fade ends;
   desktop shifts the art below the fixed header so baked-in logos are not under it */
.detail { --ar: .48828; --art-top: 60px; --k: .97; }
.detail-art { top: var(--art-top); }
.detail-art img { aspect-ratio: 1024 / 500; -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 70%, transparent); }
.detail-spacer { height: 0; margin-bottom: 0; padding-bottom: max(0px, calc(var(--art-top) + (100% + 2 * var(--side)) * var(--ar) * var(--k) - 120px)); }
@media (max-width: 960px) { .detail { --art-top: 0px; --k: .9; } .detail-art img { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); } }
@media (max-width: 600px) { .detail { --ar: 1; --k: .87; } .detail-art img { aspect-ratio: 1 / 1; } }
/* 3. genre chips: anchors land below the sticky header + chips; chips sit on a solid strip */
h2[id] { scroll-margin-top: 160px; }
.rows > .filters { background: var(--bg); margin-inline: calc(-1 * var(--side)); padding: 10px var(--side) 7px; }
@media (max-width: 960px) { h2[id] { scroll-margin-top: 120px; } .rows > .filters { margin-inline: -20px; padding: 8px 20px 5px 15px; } }
/* 6. mobile header: language button in the logo row, nav on one line at 320-414 in both languages */
@media (max-width: 960px) {
  .header .holder { position: relative; }
  .header .lang { position: absolute; top: 0; right: var(--side); line-height: 27px; font-size: 16px; }
  .header-links { display: flex; flex-wrap: nowrap; white-space: nowrap; }
  html[lang=vi] .header-links { font-size: 15px; }
}
@media (max-width: 380px) { html[lang=vi] .header-links { font-size: 13.5px; } html[lang=vi] .header-links a { margin-right: 3px; } }
@media (max-width: 340px) { .header-links { font-size: 13.5px; } html[lang=vi] .header-links { font-size: 12.5px; } }
/* 7. store buttons fit a 320px screen in Vietnamese */
@media (max-width: 380px) { .game-button { white-space: normal; font-size: 20px; line-height: 26px; } }
/* 8. contacts: captions wrap between words, left column wider */
@media (min-width: 961px) { .contact-grid .caption { overflow-wrap: normal; } }
@media (min-width: 961px) and (max-width: 1440px) { .contacts .cols.t > .rows { flex: 3 1 0; } }
/* 9. mobile header scrolls away with the page: a short fade behind the header only, page titles are not dimmed */
@media (max-width: 960px) { .header { padding-bottom: 20px; background: linear-gradient(rgba(0, 0, 0, .45), transparent); } body.light .header { background: none; } }
/* 10. careers hero caption above the title, not over it */
@media (min-width: 961px) { .join-caption { top: 0; } }
/* 11. home careers card title fits the half-width card at 961-1100 */
@media (min-width: 961px) and (max-width: 1100px) { .careers-title { font-size: 14vw; } }
/* 13. see-also screenshot keeps its whole 506:900 frame */
.see-also-media img { width: auto; height: 600px; aspect-ratio: 506 / 900; }
/* 14. hover */
.g-unit:hover .unit-title { color: var(--hover); }
/* 15. first hero slide is on screen at load (no fade from black); later loops are unchanged because slide 7 covers it */
.hero-slides img:first-child { animation-name: slide0; }
@keyframes slide0 { 0% { opacity: 1; transform: scale(1.12); } 14.3% { opacity: 1; } 17.3% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
@media (max-width: 400px) { .careers-title { font-size: 31vw; } }  /* "Team up" fits the card on small phones */

/* ---------- Publishing (/publishing/) ---------- */
html:has(.publishing) { scroll-behavior: smooth; }
.publishing { position: relative; z-index: 0; overflow: hidden; padding-top: 73px; }
.publishing .dev-m { display: none; }
.pub-bg { position: absolute; inset: 0; z-index: -1; background: #3d8ef0; opacity: 0; pointer-events: none; }
.pub-rows > * + * { margin-top: 120px; }

/* icon marquee: 3 rows, each = 2 identical sets of 10 icons sliding one set width in 25s */
.pub-mq { margin: 0 calc(-1 * var(--side)); }
.mq-row { display: flex; width: 200%; margin-left: -100%; will-change: transform; }
.mq-row + .mq-row { margin-top: 8px; }
.mq-row:nth-child(2) { opacity: .6; }
.mq-row:nth-child(3) { opacity: .3; }
.mq-row.to-l { animation: pub-to-l 25s linear infinite; }
.mq-row.to-r { animation: pub-to-r 25s linear infinite; }
/* transform, not left: moving `left` re-laid out the page every frame (CLS .45 per loop); 50% of the 200%-wide row = one set */
@keyframes pub-to-l { from { transform: translateX(50%); } to { transform: translateX(0); } }
@keyframes pub-to-r { from { transform: translateX(0); } to { transform: translateX(50%); } }
.mq-set { flex: 1 1 0; display: flex; gap: 8px; padding-right: 8px; min-width: 0; }
.mq-set img { flex: 1 1 0; min-width: 0; aspect-ratio: 1; object-fit: cover; border-radius: 22%; }

/* hero: "We launch [Global] [Casual Mobile] games" */
.pub-hero { position: relative; z-index: 100; margin-top: -168px; }
.pub-h1wrap { position: relative; }
.pub-h1 { font-size: 250px; line-height: 137px; font-weight: 800; letter-spacing: -.08em; word-spacing: 0; }
/* Vietnamese stacks marks above the letters ("triển", "Phát"): tight English leading fuses them into the line above */
html[lang="vi"] .pub-h1 { line-height: 1.04em; letter-spacing: -.05em; }  /* the hook of "ể" sits ~.95em above the baseline */
/* decorations (phone, bomb, potion) pass BEHIND the text: they sit at z-index 0, every text block next to them at z-index 1 */
.pub-phone { position: absolute; top: 0; right: 50px; width: 30%; z-index: 0; pointer-events: none; }
.pub-h1wrap > .pub-h1, .pub-tags, .pub-games, .pub-facts-cols, .pub-chart, .pub-vision, .pub-grow-p, .pub-stages, .pub-head { position: relative; z-index: 1; }
.pub-intro { max-width: calc(70% - 70px); }  /* desktop: the intro stays left of the phone column */
.pub-phone-in { border: 10px solid #111; border-radius: 52px; overflow: hidden; rotate: 8deg; box-shadow: 0 50px 90px -20px rgba(0, 0, 0, .8), 0 0 0 2px #333; }
.pub-phone-in img { width: 100%; aspect-ratio: 506 / 900; object-fit: cover; }
.pub-tags { margin: 37px 0 -32px 10px; }
.pub-tag-row { display: flex; margin-top: 6px; }
.pub-tag { width: fit-content; font-size: 85px; line-height: 75px; font-weight: 800; letter-spacing: -.06em; border-radius: 20px; padding: 0 10px 17px; margin-right: 6px; white-space: nowrap; }
.pub-tag.y { background: #ffea00; color: #000; }
.pub-tag.k { background: var(--key); color: #fff; }
.pub-tag.b { background: #00aff0; color: #fff; }
.pub-games { position: relative; }
.pub-intro { margin-top: 112px; }
.pub-lift { font-size: 50px; line-height: 55px; font-weight: 500; }
.pub-main-btn { display: block; width: fit-content; margin-top: 20px; padding: 0 12px 8px; border-radius: 6px; background: var(--key); color: #fff; white-space: nowrap; }
.pub-main-btn:hover { background: #ffea00; color: #000; }

/* banner */
.pub-banner { display: flex; gap: 60px; padding: 30px 60px; border-radius: 20px;
  background: radial-gradient(60% 100% at 20% 100%, #fff 0%, #9cc8ff 30%, var(--key) 65%, #0d2a5c 100%); }
.pub-banner-title { align-self: center; flex: none; text-align: center; font-size: 105px; line-height: 75%; font-weight: 650; letter-spacing: -.05em; padding: 0 10px 10px; margin-top: -10px;
  background: radial-gradient(82.68% 82.68% at 50% 99.67%, #fff 10.6%, #e3efff 67.99%, #8cc0ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pub-banner-r h3 { font-size: 20px; line-height: 25px; font-weight: 800; color: #ffea00; margin: -9px 0 0; }
.pub-banner-r p { margin-top: 1px; }
.pub-banner-cta { display: block; width: max-content; max-width: 100%; margin: 31px 0 8px; padding: 3px 20px 12px; border-radius: 10px; background: #000; color: #fff; font-size: 35px; line-height: 37px; word-spacing: 0; }
.pub-banner-cta:hover { background: #ffea00; color: #000 !important; }

/* facts: giant gradient numbers */
.pub-facts { position: relative; }
.pub-facts-cols { display: flex; gap: 20px; }
.pub-facts-cols > :first-child { flex: none; }
.pub-facts-cols > :last-child { flex: 1 1 0; min-width: 0; }
.pub-fact { font-size: 38vw; line-height: 85%; font-weight: 500; letter-spacing: -.09em; padding: 0 .05em .02em 0; margin-bottom: -2vw; width: fit-content;
  background: linear-gradient(180deg, #fff 16%, #9cc8ff 33%, var(--key) 60%, rgba(47, 128, 228, 0) 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pub-fact.y { margin-left: -.03em; background-image: linear-gradient(180deg, #fff04d 16%, #ffea00 58%, #ff8000 75%, rgba(255, 64, 0, 0) 95%); }
.pub-cap { position: relative; font-size: 4vw; line-height: 3.5vw; font-weight: 800; letter-spacing: -.04em; color: var(--key); margin-bottom: .5vw; }
.pub-cap.y { color: #ffea00; }
@media (min-width: 1600px) { .pub-fact { font-size: 607px; line-height: 516px; padding-bottom: 12px; margin-bottom: -32px; } .pub-cap { font-size: 64px; line-height: 56px; } }
@media (min-width: 1250px) and (max-width: 1399px) { .pub-fact { font-size: 476px; line-height: 405px; } .pub-cap { font-size: 55px; line-height: 44px; } }
.pub-bomb { position: absolute; top: 0; left: 15%; width: 32%; z-index: 0; pointer-events: none; }
.pub-bomb img { width: 100%; border-radius: 22%; rotate: -12deg; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7); }
.pub-sparkle { position: absolute; width: 40%; top: -6%; left: -4%; aspect-ratio: 1; animation: pub-spin 2s linear infinite; }
.pub-sparkle span { display: block; width: 100%; height: 100%; animation: pub-pulse 2s linear infinite;
  background: radial-gradient(circle, #fff7b0 0%, #ffea00 35%, #ffa800 75%);
  clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%); }
@keyframes pub-spin { to { rotate: 360deg; } }
@keyframes pub-pulse { 50% { scale: 1.4; } }
.pub-vision { margin-top: 30px; text-align: left; position: relative; }
.pub-arrow { display: inline-block; margin-top: 18px; color: var(--key); }
.pub-arrow::after { content: '→'; position: relative; top: .07em; left: .3em; }

/* section heads */
.pub-head { width: 70%; margin: 0 auto; text-align: center; }
.pub-head h2 { margin: -28px 0 0; font-size: 120px; line-height: 96px; font-weight: 650; }
.pub-cap-s { font-size: 16px; line-height: 18px; margin-top: 32px; }

/* cases: our games with Google Play numbers; hover swaps in the key art (reference: gameplay video) */
.pub-cases { display: flex; gap: 20px; margin-top: 67px; }
.pub-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pub-case { position: relative; isolation: isolate; aspect-ratio: 1 / 1.65; border-radius: 20px; padding: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  background: var(--key) center top / cover no-repeat; color: #fff; }
.pub-case.sq { aspect-ratio: 1; background-position: center 45%; }
.pub-case::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .6)); }
.pub-case-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; }
.pub-case.sq .pub-case-bg { object-position: center 45%; }
.pub-case-hov { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; border-radius: 20px; }
@media (hover: hover) and (min-width: 961px) { .pub-case:hover .pub-case-hov { opacity: 1; } }
.pub-case-top, .pub-factoid { position: relative; z-index: 20; }
.pub-case-sub { font-size: 14px; line-height: 16px; color: rgba(255, 255, 255, .5); }
.pub-case-sub a:hover { color: #fff; }
.pub-case-desc { font-size: 18px; line-height: 25px; }
.pub-case .store-icons { margin-top: 10px; }
.pub-case .store-icons a { color: #fff; }
.pub-case .store-icons a:hover { color: var(--hover); }
.pub-factoid { display: flex; gap: 20px; align-items: flex-end; }
.pub-fnum { font-size: 150px; line-height: 117px; font-weight: 800; letter-spacing: -.06em; }
.pub-factoid p { font-size: 30px; line-height: 30px; font-weight: 800; margin-bottom: -5px; }
.pub-more { text-align: center; margin-top: 63px; }
.pub-more a { color: var(--key); }
.pub-more a:hover { color: var(--hover); }

/* grow: three stacked service cards */
.pub-grow { position: relative; }
.pub-grow-p { margin-top: 58px; text-align: left; }
.pub-potion { position: absolute; top: 320px; right: -15px; width: 30%; z-index: 0; pointer-events: none; }
.pub-potion img { width: 100%; border-radius: 22%; rotate: 14deg; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7); }
.pub-stages { margin-top: 39px; }
.pub-stage { position: relative; display: flex; flex-direction: column; min-height: 530px; padding: 20px 30px; border-radius: 20px; }
.pub-stage.s1 { background: #fff; color: #000; z-index: 10; }
.pub-stage.s2 { background: #181818; color: #fff; z-index: 8; }
.pub-stage.s3 { background: var(--key); color: #fff; z-index: 6; }
.pub-card-h > span { display: block; font-size: 70px; line-height: 60px; font-weight: 650; letter-spacing: -.06em; }
.pub-stage .first { color: var(--key); }
.pub-stage.s3 .first { color: #000; }
.pub-list { margin: auto 0 36px; display: flex; flex-direction: column; gap: 15px; }
.pub-list p { font-size: 35px; line-height: 40px; font-weight: 500; margin-left: -2px; }
.pub-list p::before { content: ''; display: inline-block; width: 24px; height: 30px; margin-right: 16px; position: relative; top: 2px; background: currentColor;
  clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); }
.pub-stage.s1 .pub-list p::before { background: #000; }
.pub-card-fact { position: absolute; bottom: 50px; right: 30px; max-width: 309px; font-size: 14px; line-height: 16px; }
.pub-badge { font-size: 90px; line-height: 90px; font-weight: 650; letter-spacing: -.04em; color: var(--key); border: 1px solid rgba(47, 128, 228, .3); border-radius: 20px; padding: 10px 40px 22px; margin-bottom: 10px; text-align: center; }
.pub-big { font-size: 140px; line-height: 110px; font-weight: 650; letter-spacing: -.06em; }

/* form floor (submission opens a pre-filled email) */
.pub-form { position: relative; z-index: 1000; }
.pub-form > h2 { margin: -28px 0 0 -.07em; text-align: center; font-size: 120px; line-height: 96px; font-weight: 650; }
.pub-form-cols { display: flex; gap: 20px; margin-top: 108px; }
.pub-newform { flex: 4 1 0; min-width: 0; font-size: 18px; line-height: 20px; }
.pub-note { flex: 1 1 0; min-width: 0; font-size: 16px; line-height: 18px; margin-top: -4px; }
.pub-newform fieldset { border: 0; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 1px; }
.pub-field { display: flex; align-items: flex-start; }
.pub-label { flex: 0 0 180px; padding-right: 18px; margin-top: 9px; }
.pub-field input { flex: 1 1 0; min-width: 0; height: 40px; border: 0; border-radius: 0; background: #fff; color: #000; font: inherit; line-height: 21px; padding: 9px 10px 10px; outline: none; }
.pub-field input:focus { box-shadow: inset 0 0 0 2px #ffea00; }
.pub-field input::placeholder { color: #bbb; }
.pub-field:first-child input { border-radius: 6px 6px 0 0; }
.pub-field:last-child input { border-radius: 0 0 6px 6px; }
.pub-field:only-child input { border-radius: 6px; }
.pub-submit { margin-top: 20px; font: inherit; font-size: 42px; line-height: 50px; font-weight: 650; border: 0; border-radius: 10px; padding: 1px 10px 9px; background: #000; color: #fff; cursor: pointer; }
.pub-submit:hover { background: #ffea00; color: #000; }
.pub-submit[disabled] { opacity: .15; pointer-events: none; }

@media (max-width: 960px) {
  .publishing { padding-top: 91px; }
  .publishing .dev-d { display: none; }
  .publishing .dev-m { display: block; }
  .mq-row + .mq-row { margin-top: 4px; }
  .mq-row:nth-child(2) { opacity: .8; }
  .mq-row:nth-child(3) { opacity: .4; }
  .mq-set { gap: 4px; padding-right: 4px; }
  .pub-hero { margin-top: -77px; }
  .pub-h1 { font-size: 115px; line-height: 63px; }
  html[lang="vi"] .pub-h1 { line-height: 1.04em; }
  .pub-phone { width: 45%; right: 0; }
  .pub-phone-in { opacity: .4; }  /* phone: no room beside the text, so it slides behind it, dimmed so the white text stays readable */
  .pub-intro { max-width: none; }
  .pub-phone-in { border-width: 5px; border-radius: 24px; }
  .pub-tags { margin: 18px 0 -31px 5px; }
  .pub-tag-row { margin-top: 4px; }
  .pub-tag { font-size: 42px; line-height: 40px; border-radius: 14px; padding: 1px 10px 8px 7px; margin-right: 4px; }
  .pub-intro { margin-top: 52px; }
  .pub-lift { font-size: 25px; line-height: 30px; }
  .pub-main-btn { margin-top: 14px; padding: 2px 8px 6px; }
  .pub-banner { flex-direction: column; gap: 30px; padding: 30px 20px; background: radial-gradient(120% 60% at 50% 100%, #fff 0%, #9cc8ff 30%, var(--key) 65%, #0d2a5c 100%); }
  .pub-banner-title { background-image: radial-gradient(100% 100% at 50% 100%, #e3efff 0%, #8cc0ff 100%); }
  .pub-facts-cols { flex-direction: column; gap: 36px; }
  .pub-fact, .pub-fact.y { font-size: 210px; line-height: 170px; margin-bottom: -10px; margin-top: -30px; }
  .pub-cap { font-size: 25px; line-height: 25px; }
  .pub-bomb { width: 55%; left: 5%; }
  .pub-bomb img, .pub-potion img { opacity: .5; }
  .pub-head { width: 100%; }
  .pub-head h2, .pub-form > h2 { font-size: 90px; line-height: 75px; margin-top: -2px; margin-left: -.08em; }
  .pub-cap-s { margin-top: 20px; }
  .pub-cases { flex-direction: column; }
  .pub-fnum { font-size: 100px; line-height: 72px; }
  .pub-factoid { gap: 10px; }
  .pub-factoid p { font-size: 20px; line-height: 20px; }
  .pub-more { margin-top: 64px; }
  .pub-grow-p { margin-top: 56px; }
  .pub-potion { width: 45%; right: -5px; }
  .pub-stage { padding: 15px; }
  .pub-card-h > span { font-size: 52px; line-height: 45px; }
  .pub-list { margin-top: 21px; gap: 16px; }
  .pub-list p { font-size: 20px; line-height: 18px; }
  .pub-list p::before { width: 15px; height: 18px; margin-right: 8px; top: 1px; }
  .pub-card-fact { bottom: 42px; right: 10px; max-width: 200px; }
  .pub-badge { font-size: 56px; line-height: 56px; padding: 8px 24px 14px; }
  .pub-big { font-size: 90px; line-height: 72px; }
  .pub-form-cols { flex-direction: column; gap: 36px; margin-top: 70px; }
  .pub-newform fieldset { margin-bottom: 32px; gap: 12px; }
  .pub-field { display: block; }
  .pub-label { display: block; margin: 0 0 8px; padding: 0; }
  .pub-field input { width: 100%; border-radius: 6px !important; }
  .pub-submit { margin-top: 10px; width: 100%; max-width: 400px; text-align: center; }
}

/* real Google Play downloads per game in the slot of the reference revenue diagram (desktop only, like the reference) */
.pub-chart { position: relative; margin-top: 30px; height: 420px; border-left: 1px solid rgba(255, 255, 255, .35); }
.pub-chart-l { position: absolute; top: 0; right: 0; font-size: 20px; line-height: 25px; color: var(--key); }
.pub-bars { position: absolute; inset: 60px 0 0 20px; display: flex; gap: 20px; }
.pub-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.pub-bar b { font-size: 20px; line-height: 25px; font-weight: 800; margin-bottom: 8px; }
.pub-bar i { display: block; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, #9cc8ff, var(--key) 40%, rgba(47, 128, 228, .1)); box-shadow: 0 -10px 40px -6px rgba(47, 128, 228, .7); }
.pub-bar:first-child b { color: #ffea00; }
.pub-bar span { font-size: 16px; line-height: 18px; margin-top: 10px; min-height: 36px; opacity: .8; }
.pub-card-fact { width: 309px; }
/* submit feedback: missing-field message + "email ready" panel (Gmail / mail app / copy) */
.pub-err { margin-top: 14px; font-weight: 650; color: #ffea00; }
.pub-ready { margin-top: 24px; padding: 20px; border-radius: 16px; background: rgba(0, 0, 0, .35); }
.pub-ready-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pub-send { display: inline-block; font: inherit; font-weight: 650; border: 0; border-radius: 8px; padding: 8px 16px 10px; background: #fff; color: #000 !important; cursor: pointer; }
.pub-send:hover { background: #ffea00; }
.pub-copied { margin-top: 10px; font-size: 16px; }

/* shared (owned by fixbuild, lives here because build.py emits it on every page): card art as a lazy <img> instead of a
   CSS background, so cards below the fold download only when they come near the viewport. Same crop as the old background. */
.unit > .unit-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--mpos, var(--pos, center)); z-index: -1; pointer-events: none; }