:root {
  color-scheme: dark;
  --bg: #090c12;
  --panel: #10151e;
  --panel-light: #151d28;
  --text: #f4f6f2;
  --muted: #9ba5ad;
  --line: rgba(221, 232, 235, .13);
  --acid: #9b8cff;
  --cyan: #58d7ed;
  --orange: #ff8b70;
  --font: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.topbar { height: 82px; padding: 0 max(32px, calc((100vw - 1160px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 800; letter-spacing: -.07em; }
.brand-dot { color: var(--acid); }
.brand-mark { width: 23px; height: 23px; display: flex; gap: 3px; align-items: end; transform: skew(-16deg); }
.brand-mark span { display: block; width: 5px; border-radius: 4px; background: var(--acid); }
.brand-mark span:nth-child(1) { height: 10px; opacity: .58; }.brand-mark span:nth-child(2) { height: 17px; opacity: .8; }.brand-mark span:nth-child(3) { height: 23px; }
nav { display: flex; gap: 36px; font-size: 12px; color: #b5bdc1; font-weight: 600; }
nav a, .top-link { transition: color .2s ease; } nav a:hover, .top-link:hover { color: var(--acid); }
.top-link { font: 11px var(--mono); color: var(--acid); letter-spacing: .02em; }.top-link span { margin-left: 7px; font-size: 15px; }
.hero { min-height: 590px; padding: 92px 0 72px; display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 50px; }
.eyebrow { font: 10px var(--mono); color: var(--acid); letter-spacing: .15em; }
.pulse { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); margin-right: 9px; box-shadow: 0 0 12px var(--acid); }
h1 { font-size: clamp(54px, 7vw, 92px); letter-spacing: -.085em; line-height: .99; margin: 27px 0 23px; font-weight: 700; }
h1 em { font-style: normal; color: var(--acid); }
.hero-text { max-width: 420px; color: var(--muted); line-height: 1.8; font-size: 14px; margin-bottom: 29px; }
.button { height: 49px; display: inline-flex; gap: 28px; align-items: center; padding: 0 19px; font-size: 12px; font-weight: 800; }
.button-primary { background: var(--acid); color: #10150b; transition: transform .2s, background .2s; }.button-primary:hover { transform: translateY(-3px); background: #b4aaff; }.button-primary span { font-size: 17px; }
.hero-note { margin-top: 55px; display: flex; align-items: center; gap: 12px; font: 10px var(--mono); color: #7f8990; letter-spacing: .06em; }.note-line { display: block; width: 29px; height: 1px; background: var(--cyan); }
.hero-art { height: 390px; position: relative; display: grid; place-items: center; }
.orbit { border: 1px solid rgba(88,215,237,.2); border-radius: 50%; position: absolute; transform: rotate(-28deg); }.orbit-one { width: 440px; height: 245px; }.orbit-two { width: 370px; height: 320px; transform: rotate(31deg); border-color: rgba(155,140,255,.12); }
.arena { width: min(360px, 84%); aspect-ratio: 1.15; background: linear-gradient(145deg, #17222c, #10151e 68%); border: 1px solid rgba(88,215,237,.44); box-shadow: 0 20px 80px #05080d, 0 0 50px rgba(88,215,237,.08); transform: rotate(-5deg); position: relative; overflow: hidden; }
.arena-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(88,215,237,.22) 1px, transparent 1px),linear-gradient(90deg,rgba(88,215,237,.22) 1px,transparent 1px); background-size: 27px 27px; mask-image: linear-gradient(125deg,black,transparent 85%); }
.court-line { position: absolute; width: 160%; height: 1px; background: rgba(88,215,237,.45); left: -25%; top: 51%; transform: rotate(-13deg); box-shadow: 0 28px 0 rgba(88,215,237,.12),0 -28px 0 rgba(88,215,237,.12); }
.player { width: 54px; height: 104px; position: absolute; bottom: 41px; border-radius: 28px 28px 9px 9px; transform: rotate(13deg); }.player::before { content: ""; position: absolute; width: 36px; height: 36px; border-radius: 50%; top: -23px; left: 9px; background: inherit; }.player i { position: absolute; width: 13px; height: 64px; bottom: -37px; left: 10px; border-radius: 8px; background: inherit; transform: rotate(13deg); box-shadow: 22px 1px 0 -2px currentColor; }
.player-left { left: 60px; color: var(--cyan); background: var(--cyan); box-shadow: 0 0 26px rgba(88,215,237,.4); }.player-right { right: 54px; color: var(--acid); background: var(--acid); transform: rotate(-16deg) scale(.86); box-shadow: 0 0 28px rgba(155,140,255,.32); }
.ball { width: 22px; height: 22px; position: absolute; left: 49%; top: 33%; border-radius: 50%; background: var(--orange); box-shadow: 0 0 30px rgba(255,139,112,.75); }
.score-chip { position: absolute; left: 50%; top: 17px; transform: translateX(-50%); background: #090d13e8; border: 1px solid var(--line); padding: 8px 11px; display: flex; align-items: center; gap: 11px; font: 9px var(--mono); }.score-chip span { color: var(--muted); }.score-chip strong { font-size: 14px; color: var(--text); }.score-chip b { color: var(--orange); font-size: 8px; letter-spacing: .12em; }
.art-caption { position: absolute; right: 0; bottom: 3px; display: flex; align-items: center; gap: 12px; font: 9px var(--mono); color: #77838a; letter-spacing: .12em; }.caption-dash { width: 38px; height: 1px; background: var(--acid); }
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: #0d1118; }.ticker-track { min-width: 750px; width: min(1160px, calc(100% - 64px)); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 26px; height: 52px; font: 10px var(--mono); color: #a4afb3; letter-spacing: .12em; }.ticker-track b { color: var(--acid); font-size: 15px; font-weight: 400; }
.section { padding-top: 105px; }.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 29px; }.section-heading h2, .panel h2 { font-size: 31px; letter-spacing: -.055em; margin: 12px 0 0; }.section-heading p { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0 0 2px; }
.game-card { background: var(--panel); border: 1px solid var(--line); display: grid; grid-template-columns: 1.05fr 1fr auto; min-height: 250px; overflow: hidden; position: relative; }.game-visual { min-height: 250px; overflow: hidden; position: relative; background: radial-gradient(ellipse at 62% 28%, #5e7480 0, transparent 43%), linear-gradient(140deg,#243943,#111a20 72%); }.game-visual::before { content: ""; position: absolute; inset: 0; opacity: .23; background-image: linear-gradient(rgba(240,255,255,.4) 1px, transparent 1px),linear-gradient(90deg,rgba(240,255,255,.4) 1px,transparent 1px); background-size: 34px 34px; transform: perspective(220px) rotateX(55deg) scale(1.6); transform-origin: bottom center; }.game-sun { position: absolute; width: 165px; height: 165px; border-radius: 50%; top: 25px; left: 53%; transform: translateX(-50%); background: radial-gradient(circle at 30% 28%,#ffe8b2,var(--orange) 62%,#aa443f); box-shadow: 0 0 55px #ff784b52; }.game-court { position: absolute; width: 250px; height: 110px; border: 1px solid rgba(255,255,255,.66); left: 53%; bottom: -22px; transform: translateX(-50%) perspective(180px) rotateX(55deg); }.game-court span { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid rgba(255,255,255,.65); }.game-court i { position: absolute; width: 22px; height: 22px; border-radius: 50%; left: 25%; top: 40%; background: var(--cyan); box-shadow: 0 0 25px var(--cyan); }.game-court b { position: absolute; width: 17px; height: 17px; border-radius: 50%; right: 22%; top: 25%; background: var(--acid); box-shadow: 0 0 20px var(--acid); }.game-label { position: absolute; top: 50px; left: 33px; font-size: 16px; line-height: .95; letter-spacing: -.06em; font-weight: 500; transform: rotate(-7deg); text-shadow: 0 2px 15px #061015; }.game-label strong { font-size: 31px; letter-spacing: -.08em; }.game-index { position: absolute; left: 30px; bottom: 19px; font: 9px var(--mono); letter-spacing: .14em; color: #e6ebe1; }
.game-info { padding: 35px 36px; align-self: center; }.game-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.tag { color: var(--acid); font: 9px var(--mono); letter-spacing: .08em; }.tag-dot { display: inline-block; width: 6px; height: 6px; background: var(--acid); border-radius: 50%; margin-right: 7px; }.mono { color: #77838a; font: 9px var(--mono); letter-spacing: .1em; }.game-info h3 { margin: 25px 0 9px; font-size: 29px; letter-spacing: -.07em; }.game-info p { margin: 0; max-width: 385px; color: var(--muted); font-size: 12px; line-height: 1.75; }.text-link { display: inline-flex; align-items: center; gap: 11px; margin-top: 21px; font-size: 11px; font-weight: 700; }.text-link span { color: var(--acid); font-size: 15px; }.game-count { align-self: start; margin: 19px 21px 0 0; font: 10px var(--mono); color: #68757d; }
.pong-card { margin-top: 14px; }.pong-visual { background: radial-gradient(ellipse at 50% 52%, #163039 0, #101720 62%); }.pong-midline { position: absolute; height: 75%; width: 2px; top: 11%; left: 50%; background: repeating-linear-gradient(to bottom, #58d7eda0 0 11px, transparent 11px 21px); }.pong-paddle { position: absolute; width: 11px; height: 82px; top: 50%; transform: translateY(-50%); border-radius: 6px; }.pong-player { left: 24%; background: var(--cyan); box-shadow: 0 0 22px #58d7ed5c; }.pong-cpu { right: 24%; background: var(--acid); box-shadow: 0 0 22px #9b8cff5c; }.pong-ball { position: absolute; width: 15px; height: 15px; top: 36%; left: 58%; border-radius: 50%; background: var(--orange); box-shadow: 0 0 20px #ff8b70a0; }
.mining-card { margin-top: 14px; }.mining-visual { background: radial-gradient(ellipse at 62% 52%, #386459 0, #15252a 46%, #101720 80%); }.mine-shaft { position: absolute; left: 50%; top: 50%; width: 170px; height: 122px; transform: translate(-50%,-50%) rotate(-8deg); border: 1px solid #9b8cff80; border-radius: 50%; box-shadow: 0 0 45px #58d7ed2b,inset 0 0 38px #58d7ed22; }.mine-shaft span,.mine-shaft i,.mine-shaft b,.mine-shaft em { position: absolute; display: block; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 20px currentColor; }.mine-shaft span { left: 37px; top: 27px; color: var(--cyan); background: var(--cyan); }.mine-shaft i { right: 35px; top: 34px; color: var(--acid); background: var(--acid); }.mine-shaft b { left: 69px; bottom: 18px; color: var(--orange); background: var(--orange); }.mine-shaft em { right: 14px; bottom: 17px; color: var(--cyan); background: var(--cyan); width: 14px; height: 14px; }.mine-glow { position: absolute; inset: 0; background: linear-gradient(120deg,transparent 37%,#9b8cff0c 50%,transparent 63%); }.mining-section { padding-top: 72px; scroll-margin-top: 24px; }.mining-frame { overflow: hidden; border: 1px solid rgba(155,140,255,.28); background: #090c12; box-shadow: 0 22px 70px #0006; aspect-ratio: 16 / 9; }.mining-frame iframe { display: block; width: 100%; height: 100%; border: 0; }.mining-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; }
.farm-card { margin-top: 14px; }.farm-visual { background: radial-gradient(ellipse at 74% 20%, #f2d39288 0, transparent 31%), linear-gradient(145deg,#406547,#1a3828 62%,#14251c); }.farm-sun { position: absolute; width: 86px; height: 86px; border-radius: 50%; right: 16%; top: 25px; background: radial-gradient(circle at 35% 30%,#fff0c5,#edb958); box-shadow: 0 0 55px #f2d39266; }.farm-field { position: absolute; left: 50%; top: 55%; width: min(340px, 65%); height: 154px; transform: translate(-50%,-50%) perspective(240px) rotateX(45deg) rotateZ(-7deg); display: grid; grid-template-rows: repeat(3,1fr); gap: 8px; padding: 10px; border: 1px solid #b8d38c80; background: #775639; box-shadow: 0 16px 28px #08170c88; }.farm-row { display: flex; justify-content: space-around; align-items: center; border: 1px solid #ba956080; background: repeating-linear-gradient(90deg,#6f4f32 0 37px,#795938 37px 40px); }.farm-row i { width: 14px; height: 23px; border-radius: 65% 12% 65% 12%; transform: rotate(-28deg); background: #a8d16e; box-shadow: 12px 6px 0 -2px #77ad55; }.row-two i { background: #ed6971; box-shadow: 12px 6px 0 -2px #84b85b; }.row-three i { background: #f0b84d; box-shadow: 12px 6px 0 -2px #91bf5b; }.farm-section { padding-top: 72px; scroll-margin-top: 24px; }.farm-frame { overflow: hidden; border: 1px solid #8fb67760; background: #0d1710; box-shadow: 0 22px 70px #0006; aspect-ratio: 16 / 9; }.farm-frame iframe { display: block; width: 100%; height: 100%; border: 0; }.farm-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.pong-section { padding-top: 72px; scroll-margin-top: 24px; }.pong-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 20px; }.pong-heading h3 { font-size: 27px; letter-spacing: -.06em; margin: 11px 0 0; }.pong-heading p { color: var(--muted); font-size: 11px; margin: 0 0 4px; }.pong-frame { overflow: hidden; border: 1px solid rgba(88,215,237,.28); background: #090c12; box-shadow: 0 22px 70px #0006; aspect-ratio: 16 / 9; }.pong-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.lower-grid { padding-top: 23px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 23px; }.panel { border: 1px solid var(--line); background: var(--panel); padding: 28px 30px; }.panel-top { display: flex; justify-content: space-between; align-items: flex-start; }.panel h2 { font-size: 26px; }.panel-icon { color: var(--acid); font-size: 17px; }.empty-state { min-height: 126px; display: flex; align-items: center; gap: 19px; border-bottom: 1px solid var(--line); }.empty-icon { width: 41px; height: 41px; flex: 0 0 auto; display: grid; place-items: center; color: var(--acid); border: 1px solid #9b8cff50; font: 24px var(--mono); }.empty-state strong { font-size: 12px; }.empty-state p { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 7px 0 0; }.panel-foot { display: flex; justify-content: space-between; padding-top: 17px; font: 8px var(--mono); letter-spacing: .12em; color: #7f8990; }.panel-foot span:last-child { color: var(--acid); }
.status-card { background: linear-gradient(148deg,#131b1f,#10151e 75%); }.status-main { display: flex; align-items: center; gap: 10px; margin-top: 33px; font: 12px var(--mono); letter-spacing: .09em; }.status-light { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px #58d7edad; }.status-card > p { max-width: 330px; margin: 13px 0 24px; color: var(--muted); font-size: 11px; line-height: 1.7; }.status-details { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); padding-top: 17px; gap: 10px; }.status-details div { display: grid; gap: 7px; }.status-details span { font: 8px var(--mono); color: #77838a; letter-spacing: .1em; }.status-details strong { font: 9px var(--mono); color: var(--acid); letter-spacing: .05em; }
.closing { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 40px; padding: 107px 0 100px; border-bottom: 1px solid var(--line); overflow: hidden; }.closing h2 { position: relative; z-index: 1; font-size: clamp(38px,5vw,58px); letter-spacing: -.075em; line-height: 1.04; margin: 15px 0 0; }.closing > p { color: var(--muted); line-height: 1.8; font-size: 13px; max-width: 360px; margin: 0 0 5px; }.closing-shape { position: absolute; top: 8px; right: 9%; font-size: 280px; line-height: 1; color: #18202a; font-weight: 400; transform: rotate(14deg); }
.footer { min-height: 92px; display: flex; align-items: center; justify-content: space-between; color: #76828a; font-size: 10px; }.footer .brand { color: var(--text); font-size: 14px; }.footer .brand-mark { width: 18px; height: 18px; }.footer .brand-mark span { width: 4px; }.footer .brand-mark span:nth-child(1) { height: 8px; }.footer .brand-mark span:nth-child(2) { height: 13px; }.footer .brand-mark span:nth-child(3) { height: 18px; }
@media (max-width: 760px) { .wrap { width: min(100% - 36px, 520px); }.topbar { height: 68px; padding: 0 18px; }.topbar nav { display: none; }.hero { grid-template-columns: 1fr; gap: 22px; padding: 71px 0 50px; }.hero-art { height: 310px; }.orbit-one { width: 350px; height: 190px; }.orbit-two { width: 300px; height: 260px; }.arena { width: min(310px, 84%); }.hero-note { margin-top: 35px; }.ticker-track { width: max-content; padding-inline: 18px; gap: 18px; }.section { padding-top: 75px; }.section-heading { align-items: start; flex-direction: column; gap: 12px; }.section-heading h2 { font-size: 27px; }.game-card { grid-template-columns: 1fr; }.game-visual { min-height: 235px; }.game-info { padding: 27px 23px 29px; }.game-count { position: absolute; right: 0; top: 215px; }.pong-heading { align-items: start; flex-direction: column; gap: 9px; }.pong-heading h3 { font-size: 24px; }.pong-section,.mining-section,.farm-section { padding-top: 55px; }.pong-frame,.mining-frame,.farm-frame { aspect-ratio: 4 / 3; }.lower-grid { grid-template-columns: 1fr; gap: 14px; }.panel { padding: 24px 22px; }.closing { grid-template-columns: 1fr; gap: 20px; padding: 82px 0 70px; }.closing-shape { right: 0; top: 70px; font-size: 200px; }.closing > p { max-width: 420px; }.footer { min-height: 115px; display: grid; grid-template-columns: 1fr auto; row-gap: 3px; padding-block: 20px; }.footer > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }.footer .mono { grid-column: 2; grid-row: 1; font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
.moss-visual { background: radial-gradient(ellipse at 67% 24%,#e4d79b82 0,transparent 22%),linear-gradient(155deg,#27473b,#172a25 58%,#101b19); }
.moss-moon { position:absolute; width:84px; height:84px; right:16%; top:31px; border-radius:50%; background:radial-gradient(circle at 35% 31%,#fff5c9,#dcc176 67%,#a68248); box-shadow:0 0 54px #e4d79b55; }
.moss-hill { position:absolute; left:-5%; width:110%; border-radius:50% 50% 0 0; }
.hill-back { height:105px; bottom:56px; background:linear-gradient(145deg,#54785c,#304e3f); transform:rotate(-5deg); }
.hill-front { height:97px; bottom:-18px; background:linear-gradient(160deg,#304e3c,#1a3027); transform:rotate(5deg); }
.moss-lantern { position:absolute; left:52%; top:38%; width:43px; height:43px; display:grid; place-items:center; border-radius:50%; color:#f5e4a4; font-size:28px; text-shadow:0 0 20px #ffe78f; background:#f5e4a41a; box-shadow:0 0 42px #f5e4a433; }
.moss-path { position:absolute; left:32%; bottom:-32px; width:180px; height:100px; border-radius:50%; border-top:1px solid #d5c38c70; transform:rotate(-23deg); }