@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;700;900&display=swap');

:root { --ink: #f3f1ec; --muted: #a8a8b4; --line: rgba(243,241,236,.16); --bg: #0a0d14; --purple: #9288f5; --yellow: #f5c75c; --mint: #96dbc6; --coral: #ff856f; --mono: 'DM Mono', monospace; --sans: 'Manrope', 'Noto Sans SC', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.site-shell { position: relative; min-height: 100vh; overflow: hidden; }
.starfield { position: fixed; inset: 0; pointer-events: none; opacity: .8; }
.star { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; box-shadow: 0 0 7px rgba(255,255,255,.55); animation: twinkle 4s ease-in-out infinite; }
.star-1 { top: 15%; left: 8%; }.star-2 { top: 27%; left: 42%; animation-delay: 1s; }.star-3 { top: 8%; right: 25%; }.star-4 { top: 38%; right: 8%; animation-delay: 2s; }.star-5 { top: 62%; left: 16%; }.star-6 { top: 74%; left: 50%; animation-delay: 2.7s; }.star-7 { top: 86%; right: 15%; }.star-8 { top: 48%; left: 72%; animation-delay: .7s; }.star-9 { top: 18%; right: 5%; }.star-10 { top: 91%; left: 28%; animation-delay: 1.6s; }.star-11 { top: 56%; left: 3%; }.star-12 { top: 34%; left: 88%; animation-delay: 3s; }.star-13 { top: 12%; left: 64%; }.star-14 { top: 79%; right: 42%; animation-delay: 1.2s; }.star-15 { top: 45%; left: 31%; }
.section-wrap, .topbar { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font: 500 12px var(--mono); letter-spacing: .04em; }
.wordmark-favicon { width: 34px; height: 34px; display: block; object-fit: cover; border-radius: 6px; }
.wordmark-dot { color: var(--coral); }.wordmark-orbit { width: 24px; height: 24px; border: 1px solid var(--purple); border-radius: 50%; position: relative; transform: rotate(-35deg); }.wordmark-orbit:before { content: ''; position: absolute; inset: 4px 8px; border: 1px solid var(--yellow); border-radius: 50%; }.wordmark-orbit b { position: absolute; width: 3px; height: 3px; background: var(--ink); border: 1px solid var(--yellow); border-radius: 50%; }.wordmark-orbit b:nth-child(1) { top: 1px; left: 9px; }.wordmark-orbit b:nth-child(2) { bottom: 3px; right: 1px; }.wordmark-orbit b:nth-child(3) { bottom: 4px; left: 2px; }
.main-nav { display: flex; gap: 35px; margin-left: 80px; color: var(--muted); font-size: 12px; }.main-nav a { position: relative; padding: 10px 0; }.main-nav a:hover, .main-nav a.active { color: var(--ink); }.main-nav a.active:after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--coral); }
.status-chip { display: flex; align-items: center; gap: 8px; font: 400 10px var(--mono); color: var(--muted); }.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(150,219,198,.1); }
.hero { min-height: 710px; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; position: relative; padding: 82px 0 110px; }.eyebrow { margin: 0 0 20px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .1em; }.eyebrow-mark { color: var(--yellow); margin-right: 8px; }.hero h1 { margin: 0; font-size: clamp(76px, 10vw, 144px); line-height: .86; letter-spacing: -.08em; font-weight: 800; }.hero h1 em { color: var(--purple); font-style: normal; }.hero-intro { margin: 36px 0 32px; color: #c2c1ca; font-size: 17px; line-height: 1.75; font-weight: 500; }.hero-actions { display: flex; align-items: center; gap: 26px; }.button { display: inline-flex; align-items: center; gap: 34px; padding: 14px 16px 14px 19px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }.button-primary { background: var(--ink); color: var(--bg); }.button-primary:hover { background: var(--yellow); }.button-arrow { font-size: 18px; line-height: 1; }.text-link { display: inline-flex; gap: 16px; align-items: center; padding-bottom: 5px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 12px; font-weight: 600; }.text-link span { color: var(--coral); font-size: 16px; }.text-link:hover { border-color: var(--coral); }
.hero-visual { height: 500px; position: relative; }.visual-label { position: absolute; font: 10px var(--mono); color: var(--muted); letter-spacing: .08em; }.visual-label-top { top: 25px; right: 4%; }.planet-system { position: absolute; width: min(520px, 42vw); aspect-ratio: 1; top: 50%; left: 54%; transform: translate(-50%, -50%); }.orbit { position: absolute; border: 1px solid rgba(146,136,245,.32); border-radius: 50%; }.orbit-wide { inset: 12% -10%; transform: rotate(-21deg); }.orbit-small { inset: 25% 9%; transform: rotate(61deg); border-color: rgba(245,199,92,.35); }.planet { position: absolute; width: 42%; aspect-ratio: 1; border-radius: 50%; top: 29%; left: 30%; background: #8f83ea; box-shadow: 0 0 0 1px rgba(243,241,236,.28), 0 0 60px rgba(146,136,245,.24); overflow: hidden; }.planet:before, .planet:after { content: ''; position: absolute; border: 2px solid rgba(10,13,20,.16); border-radius: 50%; transform: rotate(-24deg); }.planet:before { width: 125%; height: 30%; left: -10%; top: 18%; }.planet:after { width: 150%; height: 24%; left: -25%; top: 58%; }.planet-shine { position: absolute; width: 35%; height: 35%; top: 10%; left: 15%; background: rgba(255,255,255,.18); border-radius: 50%; filter: blur(8px); }.planet-ring { position: absolute; width: 150%; height: 22%; border: 2px solid var(--yellow); border-radius: 50%; left: -25%; top: 42%; transform: rotate(-22deg); opacity: .7; }.satellite { position: absolute; width: 12px; height: 12px; border: 1px solid var(--ink); background: var(--coral); border-radius: 50%; left: 4%; top: 25%; box-shadow: 0 0 0 5px rgba(255,133,111,.1); }.satellite:before, .satellite:after { content: ''; position: absolute; width: 30px; height: 1px; background: var(--coral); top: 5px; }.satellite:before { right: 9px; }.satellite:after { left: 9px; }.signal { position: absolute; border: 1px solid rgba(243,241,236,.55); border-radius: 50%; }.signal-1 { width: 8px; height: 8px; right: 11%; top: 17%; background: var(--mint); border: 0; }.signal-2 { width: 4px; height: 4px; right: 2%; top: 33%; background: var(--yellow); border: 0; }.signal-3 { width: 6px; height: 6px; bottom: 15%; left: 20%; background: var(--coral); border: 0; }.visual-caption { position: absolute; right: 2%; bottom: 30px; text-align: right; }.visual-caption span { display: block; color: var(--yellow); font: 10px var(--mono); margin-bottom: 6px; }.visual-caption strong { color: var(--muted); font: 500 12px/1.4 var(--mono); }.scroll-cue { display: flex; align-items: center; gap: 10px; position: absolute; bottom: 30px; left: 0; color: var(--muted); font: 10px var(--mono); }.scroll-line { width: 31px; height: 1px; background: var(--coral); }
.games { padding: 108px 0 116px; border-top: 1px solid var(--line); }.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 50px; }.section-heading .eyebrow { margin-bottom: 15px; }.section-heading h2, .about h2 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: .98; letter-spacing: -.07em; }.section-heading h2 span, .about h2 span { color: var(--coral); }.section-note { margin: 0 12% 4px 0; color: var(--muted); font: 11px/1.7 var(--mono); text-align: right; }.game-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.game-card { min-height: 440px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; color: var(--bg); transition: transform .25s ease, box-shadow .25s ease; }.game-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 18px 40px rgba(0,0,0,.25); }.game-card-lilac { background: var(--purple); }.game-card-sun { background: var(--yellow); }.game-card-mint { background: var(--mint); }.game-card-coral { background: var(--coral); }.game-card-top { display: flex; justify-content: space-between; font: 11px var(--mono); }.card-arrow { font-size: 18px; }.game-icon { align-self: center; position: relative; width: 155px; height: 155px; }.game-card-bottom h3 { margin: 0 0 7px; font-size: 20px; letter-spacing: -.06em; }.game-card-bottom p { min-height: 42px; margin: 0 0 25px; font-size: 11px; line-height: 1.6; opacity: .72; }.play-label { display: inline-flex; justify-content: space-between; width: 100%; padding-top: 12px; border-top: 1px solid rgba(10,13,20,.3); font: 10px var(--mono); }.play-label b { font-size: 17px; line-height: .7; }.icon-constellation i { position: absolute; width: 9px; height: 9px; border: 2px solid var(--bg); border-radius: 50%; }.icon-constellation i:nth-child(1) { top: 21%; left: 17%; }.icon-constellation i:nth-child(2) { top: 43%; left: 48%; }.icon-constellation i:nth-child(3) { top: 12%; right: 12%; }.icon-constellation i:nth-child(4) { bottom: 14%; right: 28%; }.icon-constellation:before, .icon-constellation:after { content: ''; position: absolute; height: 1px; background: var(--bg); transform-origin: left center; }.icon-constellation:before { width: 89px; top: 37%; left: 20%; transform: rotate(25deg); box-shadow: 38px 31px 0 var(--bg); }.icon-constellation:after { width: 60px; top: 42%; left: 49%; transform: rotate(-55deg); }.icon-constellation b { position: absolute; width: 38px; height: 38px; border: 2px solid var(--bg); border-radius: 50%; right: 11%; top: 0; }.icon-sun .sun-core { width: 66px; height: 66px; background: var(--bg); border-radius: 50%; position: absolute; left: 44px; top: 43px; }.icon-sun i { position: absolute; left: 72px; top: 8px; width: 2px; height: 34px; background: var(--bg); transform-origin: 1px 70px; }.icon-sun i:nth-child(2) { transform: rotate(45deg); }.icon-sun i:nth-child(3) { transform: rotate(90deg); }.icon-sun i:nth-child(4) { transform: rotate(135deg); }.icon-fish { border: 2px solid var(--bg); border-radius: 50% 55% 48% 45%; width: 118px; height: 76px; margin-top: 40px; }.icon-fish:before { content: ''; position: absolute; width: 25px; height: 25px; border: 2px solid var(--bg); border-radius: 50%; right: -21px; top: 23px; }.fish-tail { position: absolute; right: -38px; top: 12px; width: 38px; height: 48px; border: 2px solid var(--bg); border-left: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }.fish-eye { position: absolute; width: 7px; height: 7px; background: var(--bg); border-radius: 50%; top: 24px; left: 25px; }.icon-fish i { position: absolute; width: 14px; height: 14px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); border-radius: 0 0 0 12px; top: 45px; }.icon-fish i:nth-of-type(1) { left: 22px; }.icon-fish i:nth-of-type(2) { left: 51px; top: 26px; transform: rotate(30deg); }.icon-fish i:nth-of-type(3) { left: 78px; top: 42px; transform: rotate(-20deg); }.icon-maze { width: 140px; height: 140px; border: 2px solid var(--bg); margin-top: 10px; }.icon-maze:before, .icon-maze:after, .icon-maze span { content: ''; position: absolute; background: var(--bg); }.icon-maze:before { width: 2px; height: 82%; left: 34%; top: 9%; box-shadow: 45px 0 0 var(--bg); }.icon-maze:after { width: 82%; height: 2px; left: 9%; top: 33%; box-shadow: 0 45px 0 var(--bg); }.icon-maze span:nth-child(1) { width: 35px; height: 2px; left: 9%; top: 68%; transform: rotate(-35deg); }.icon-maze span:nth-child(2) { width: 35px; height: 2px; left: 50%; top: 15%; transform: rotate(45deg); }.icon-maze span:nth-child(3) { width: 27px; height: 2px; right: 7%; bottom: 15%; transform: rotate(-45deg); }.icon-maze b { position: absolute; width: 13px; height: 13px; border: 2px solid var(--bg); border-radius: 50%; right: 16px; top: 18px; }.games-footer { display: flex; align-items: center; gap: 16px; margin-top: 28px; color: var(--muted); font: 10px var(--mono); }.footer-line { height: 1px; width: 58px; background: var(--line); }
.about { display: grid; grid-template-columns: .8fr 1.3fr .55fr; gap: 8%; padding: 115px 0 125px; border-top: 1px solid var(--line); }.about-index .eyebrow { margin-bottom: 44px; }.about-number { color: var(--yellow); font: 72px var(--mono); letter-spacing: -.12em; }.about-copy p { max-width: 510px; margin: 28px 0 0; color: #c2c1ca; font-size: 15px; line-height: 1.9; }.about-copy .text-link { margin-top: 30px; }.about-aside { padding-top: 16px; color: var(--muted); }.avatar { display: block; width: min(100%, 176px); aspect-ratio: 1; object-fit: cover; border: 1px solid rgba(243,241,236,.46); border-radius: 18px; margin-bottom: 28px; background: #fff; }.monogram { color: var(--ink); font: 800 62px/1 var(--sans); letter-spacing: -.14em; }.monogram span { color: var(--coral); font-size: 28px; margin: 0 8px; }.about-aside p { margin: 30px 0 20px; font: 14px/1.6 var(--mono); color: var(--muted); }.aside-rule { width: 100%; height: 1px; background: var(--line); margin-bottom: 12px; }.about-aside > span { font: 10px var(--mono); color: var(--yellow); }.footer { padding: 26px 0 32px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: var(--muted); font: 10px var(--mono); }.footer-mark { color: var(--ink); font-size: 10px; }.back-top:hover { color: var(--ink); }
.contact-links { display: flex; align-items: center; gap: 10px; margin-top: 30px; min-height: 36px; }.contact-button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }.contact-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }.contact-button:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateY(-2px); }.contact-xhs:hover { background: #ff5f7e; border-color: #ff5f7e; }.contact-wechat:hover { background: #52c41a; border-color: #52c41a; }.copy-toast { margin-left: 5px; min-width: 0; color: var(--mint); font: 10px var(--mono); opacity: 0; transition: opacity .2s ease; }.copy-toast.visible { opacity: 1; }
.contact-label { margin: 30px 0 0 !important; color: var(--yellow) !important; font: 10px var(--mono) !important; letter-spacing: .08em; }
@keyframes twinkle { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.4); } }
@media (max-width: 900px) { .section-wrap, .topbar { width: min(100% - 48px, 680px); }.topbar { height: 75px; }.main-nav { margin-left: 0; gap: 18px; }.status-chip { display: none; }.hero { min-height: auto; grid-template-columns: 1fr; padding: 80px 0 100px; }.hero h1 { font-size: clamp(84px, 19vw, 130px); }.hero-visual { height: 410px; margin-top: 30px; }.planet-system { width: min(480px, 90vw); left: 50%; }.visual-label-top { top: 0; right: 0; }.scroll-cue { bottom: 0; }.section-heading { align-items: start; flex-direction: column; gap: 22px; }.section-note { margin: 0; text-align: left; }.game-grid { grid-template-columns: repeat(2, 1fr); }.game-card { min-height: 410px; }.about { grid-template-columns: .7fr 1.3fr; gap: 40px; }.about-aside { grid-column: 2; }.about-index { grid-row: span 2; } }
@media (max-width: 560px) { .section-wrap, .topbar { width: calc(100% - 32px); }.topbar { height: 68px; }.wordmark { font-size: 10px; gap: 8px; }.wordmark-orbit { width: 20px; height: 20px; }.main-nav { font-size: 11px; gap: 14px; }.hero { padding: 68px 0 90px; }.hero h1 { font-size: 28vw; }.hero-intro { margin: 28px 0; font-size: 15px; }.desktop-break { display: none; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 21px; }.hero-visual { height: 340px; margin-top: 30px; }.planet-system { width: 100%; top: 48%; }.visual-caption { right: 0; bottom: 0; }.games { padding: 80px 0 85px; }.section-heading { margin-bottom: 32px; }.section-heading h2, .about h2 { font-size: 48px; }.game-grid { gap: 10px; }.game-card { min-height: 365px; padding: 13px; }.game-icon { transform: scale(.72); transform-origin: center; margin-block: -4px; }.game-card-bottom h3 { font-size: 16px; }.game-card-bottom p { font-size: 10px; min-height: 50px; }.play-label { font-size: 9px; }.games-footer { margin-top: 20px; }.about { display: block; padding: 85px 0 95px; }.about-index { display: flex; justify-content: space-between; align-items: start; margin-bottom: 45px; }.about-index .eyebrow { margin: 0; }.about-number { font-size: 50px; }.about-copy p { margin-top: 22px; font-size: 14px; }.about-aside { margin-top: 70px; }.avatar { width: min(176px, 54vw); }.footer { gap: 12px; flex-wrap: wrap; }.back-top { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.star, .game-card { animation: none; transition: none; } }

/* Keep the four game marks in one hand-drawn line style while preserving each game's cue. */
.about { grid-template-columns: 1.3fr .55fr; }
@media (max-width: 900px) { .about { grid-template-columns: 1.3fr .7fr; } }
@media (max-width: 560px) { .about { display: block; } }
.icon-constellation { width: 138px; height: 138px; border: 2px solid var(--bg); border-radius: 50%; margin-top: 8px; }
.icon-constellation:before, .icon-constellation:after { content: ''; position: absolute; border: 2px solid var(--bg); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(45deg); background: transparent; }
.icon-constellation:before { width: 66px; height: 66px; left: 33px; top: 33px; }
.icon-constellation:after { width: 94px; height: 94px; left: 20px; top: 20px; opacity: .6; }
.icon-constellation i { position: absolute; width: 8px; height: 8px; border: 2px solid var(--bg); border-radius: 50%; background: transparent; }
.icon-constellation i:nth-child(1) { top: 24%; left: 22%; }.icon-constellation i:nth-child(2) { top: 47%; left: 49%; }.icon-constellation i:nth-child(3) { top: 18%; right: 18%; }.icon-constellation i:nth-child(4) { bottom: 18%; right: 25%; }
.icon-constellation b { position: absolute; width: 2px; height: 2px; background: var(--bg); border-radius: 50%; left: 50%; top: 50%; box-shadow: -42px -24px 0 var(--bg), 34px -39px 0 var(--bg), 44px 25px 0 var(--bg), -27px 41px 0 var(--bg); }
.icon-sun { width: 140px; height: 140px; }
.icon-sun .sun-core { width: 57px; height: 57px; background: transparent; border: 2px solid var(--bg); border-radius: 50%; position: absolute; left: 21px; top: 45px; }
.icon-sun .sun-core:before, .icon-sun .sun-core:after { content: ''; position: absolute; background: var(--bg); }
.icon-sun .sun-core:before { width: 2px; height: 29px; left: 26px; top: -31px; box-shadow: 0 89px 0 var(--bg); }
.icon-sun .sun-core:after { width: 29px; height: 2px; left: -31px; top: 26px; box-shadow: 89px 0 0 var(--bg); }
.icon-sun i { position: absolute; width: 2px; height: 29px; background: var(--bg); left: 48px; top: 45px; transform-origin: 1px 28px; }
.icon-sun i:nth-child(2) { transform: rotate(45deg); }.icon-sun i:nth-child(3) { transform: rotate(90deg); }.icon-sun i:nth-child(4) { transform: rotate(135deg); }.icon-sun i:nth-child(5) { transform: rotate(180deg); }
.icon-fish { width: 140px; height: 140px; border: 0; border-radius: 0; margin-top: 8px; }
.icon-fish:before { content: ''; position: absolute; width: 104px; height: 72px; border: 2px solid var(--bg); border-radius: 48% 52% 48% 52%; left: 5px; top: 34px; background: transparent; }
.icon-fish:after { content: ''; position: absolute; width: 26px; height: 26px; border: 2px solid var(--bg); border-left: 0; border-bottom: 0; transform: rotate(45deg); right: 9px; top: 55px; background: transparent; }
.icon-fish i { position: absolute; z-index: 1; width: 16px; height: 16px; border: 2px solid var(--bg); border-radius: 50%; top: 52px; background: transparent; }
.icon-fish i:nth-of-type(1) { left: 28px; background: var(--coral); }.icon-fish i:nth-of-type(2) { left: 53px; background: var(--yellow); }.icon-fish i:nth-of-type(3) { left: 78px; background: var(--purple); }
.fish-eye { position: absolute; z-index: 2; width: 6px; height: 6px; background: var(--bg); border-radius: 50%; top: 55px; left: 26px; }.fish-tail { display: none; }
.icon-maze { width: 140px; height: 140px; border: 0; margin-top: 8px; }
.icon-maze:before { content: ''; position: absolute; width: 120px; height: 70px; left: 10px; top: 35px; border: 2px solid var(--bg); border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%; transform: rotate(-8deg); background: transparent; }
.icon-maze:after { content: ''; position: absolute; width: 46px; height: 46px; left: 47px; top: 47px; border: 2px solid var(--bg); border-radius: 50%; background: transparent; }
.icon-maze span { display: none; }.icon-maze b { position: absolute; width: 13px; height: 13px; border: 2px solid var(--bg); border-radius: 50%; left: 63px; top: 63px; background: var(--bg); }
.contact-email:hover { background: var(--yellow); border-color: var(--yellow); }

/* Keep one clear about section when older duplicate markup is present. */
.about > .about-copy + .about-copy { display: none; }
.about { grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr); align-items: start; gap: clamp(48px, 9vw, 128px); }
.about-copy { max-width: 680px; }
.about-eyebrow { margin-bottom: 22px !important; color: var(--muted); }
.about-copy h2 { font-size: clamp(48px, 6vw, 80px); }
.about-copy p { max-width: 620px; }
.about-copy .contact-label { margin-top: 42px !important; padding-top: 18px; border-top: 1px solid var(--line); }
.about-aside { border-left: 1px solid var(--line); padding: 16px 0 0 32px; }
@media (max-width: 900px) { .about { grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr); gap: 40px; } }
@media (max-width: 560px) { .about-aside { border-left: 0; border-top: 1px solid var(--line); padding: 36px 0 0; } }

.game-icon:before, .game-icon:after, .game-icon i, .game-icon b, .game-icon span { display: none; }
.game-icon { width: 168px; height: 168px; overflow: hidden; border-radius: 50%; }
.game-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero-copy { position: relative; z-index: 1; max-width: 680px; }

/* Keep both hero actions equal in rhythm while allowing distinct colors. */
.hero-actions .button,
.hero-actions .text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 34px; width: 174px; min-height: 46px; padding: 14px 16px 14px 19px; border: 1px solid var(--ink); font: 700 12px/1 var(--sans); text-decoration: none; }
.hero-actions .button-primary { border-color: transparent; }
.hero-actions .text-link { color: var(--ink); background: transparent; }
.hero-actions .text-link span { color: var(--coral); font-size: 18px; line-height: 1; }
.hero-actions .text-link:hover { border-color: var(--coral); }