:root {
  --bg: #050b1f;
  --bg2: #0a1a44;
  --blue: #2f7bff;
  --blue-2: #5ea2ff;
  --blue-3: #a9ccff;
  --ink: #eef4ff;
  --mute: #8ea3c8;
  --line: rgba(150, 190, 255, .14);
  --card: rgba(14, 28, 66, .62);
  --card-2: rgba(20, 40, 92, .55);
  --radius: 22px;
  --gutter: clamp(16px, 4vw, 48px);
  --font: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }

/* ---------- background layers: gradient, glow, grid, then the 3D canvas ---------- */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 10%, #0f2a6e 0%, #081538 45%, var(--bg) 80%); }
.bg .glow { position: absolute; left: 50%; top: 42%; width: 70vmin; height: 70vmin; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(circle, rgba(47,123,255,.42), rgba(47,123,255,0) 65%);
  filter: blur(10px); transition: opacity .6s; }
.bg .grid { position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%); }
#world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; display: block; transition: opacity .5s; }
body.grab-hover { cursor: grab; }
body.grabbing, body.grabbing * { cursor: grabbing !important; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 24px;
  padding: 14px var(--gutter); }
.nav::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(5,11,31,.75), rgba(5,11,31,0)); pointer-events: none; z-index: -1; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; font-size: 18px; }
.logo img { border-radius: 8px; }
.logo span { line-height: 1; transform: translateY(-2px); } /* the logo's ears make it bottom-heavy */
.nav nav { display: flex; gap: 4px; margin: 0 auto; padding: 4px; border-radius: 999px; background: rgba(14,28,66,.55); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--mute); padding: 7px 14px; border-radius: 999px; transition: color .2s, background .2s; }
.nav nav a:hover, .nav nav a.on { color: var(--ink); background: rgba(47,123,255,.22); }
.nav-right { display: flex; gap: 8px; }
.pill { border: 1px solid var(--line); background: rgba(14,28,66,.55); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--mute); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: color .2s, border-color .2s; }
.pill[aria-pressed="true"] { color: var(--ink); border-color: rgba(94,162,255,.6); }
.pill:hover { color: var(--ink); }

/* ---------- hero (pinned) ---------- */
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.big-name { position: absolute; z-index: 1; left: 50%; top: 44%; translate: -50% -50%; margin: 0;
  font-size: clamp(120px, 30vw, 520px); font-weight: 900; letter-spacing: -.06em; line-height: .8; white-space: nowrap;
  background: linear-gradient(180deg, rgba(169,204,255,.34), rgba(47,123,255,.05) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; user-select: none; }
.hero-copy { position: absolute; z-index: 3; left: var(--gutter); bottom: clamp(28px, 7vh, 72px); max-width: 420px; }
.kicker { font-family: var(--mono); font-size: 13px; color: var(--blue-2); letter-spacing: .04em; margin-bottom: 12px; }
.kicker::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #39d98a; margin-right: 10px; box-shadow: 0 0 10px #39d98a; vertical-align: 1px; }
.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: #c9d8f5; margin-bottom: 22px; text-wrap: balance; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 0; cursor: pointer;
  background: linear-gradient(180deg, #4a8dff, #2468e8); color: #fff; box-shadow: 0 10px 30px -8px rgba(47,123,255,.7), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s, box-shadow .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(47,123,255,.85), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.ghost { background: rgba(14,28,66,.6); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn .i { width: 18px; height: 18px; }
.hint { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(28px, 7vh, 72px); font-size: 13px; color: var(--mute); max-width: 220px; text-align: right; line-height: 1.5; }
.scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 22px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: .2em; text-transform: uppercase; }
.scroll-cue span { width: 22px; height: 34px; border-radius: 12px; border: 1.5px solid rgba(169,204,255,.4); position: relative; }
.scroll-cue span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--blue-2); animation: cue 1.8s infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

.loading { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none; transition: opacity .6s; }
.loading span { width: 40px; height: 40px; border-radius: 10px; background: var(--blue); animation: spin 1.2s cubic-bezier(.6,0,.4,1) infinite; box-shadow: 0 0 40px rgba(47,123,255,.6); }
.loading.done { opacity: 0; }
@keyframes spin { to { transform: rotate(180deg); } }

/* stats: lives inside the pinned hero, bricks stack on top of each card */
.stats { position: absolute; z-index: 3; inset: 0; padding: 96px var(--gutter) clamp(28px, 6vh, 60px); display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; visibility: hidden; }
.stats-head { text-align: center; }
.stats h2 { font-size: clamp(34px, 5vw, 64px); font-weight: 800; letter-spacing: -.04em; }
.metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1180px; width: 100%; margin: 0 auto; }
.metric { padding: 18px 18px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.metric b { display: block; font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.metric span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); margin-top: 4px; }
.metric span .i { width: 14px; height: 14px; color: var(--blue-2); }
.metric.live b::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #39d98a; margin-left: 8px; vertical-align: middle; box-shadow: 0 0 10px #39d98a; animation: blink 2s infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- content sections ---------- */
main { position: relative; z-index: 3; }
.sec { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 9vh, 100px) var(--gutter); }
.eyebrow { font-family: var(--mono); font-size: 13px; color: var(--blue-2); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
.sec h2 { font-size: clamp(36px, 6vw, 76px); font-weight: 800; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.sub { color: var(--mute); font-size: 17px; margin-top: 16px; max-width: 560px; line-height: 1.5; }

/* games: alternating left/right */
.games { display: flex; flex-direction: column; gap: clamp(56px, 10vh, 110px); margin-top: clamp(48px, 8vh, 80px); }
.game { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.game[data-side="right"] .game-media { order: 2; }
.game-media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #0b1636; border: 1px solid var(--line);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(47,123,255,.08); transform: perspective(1200px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transition: transform .3s ease-out; }
.game-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s, transform 6s linear; }
.game-media:hover img { transform: scale(1.04); }
.game-media .dots { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 6px; }
.game-media .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.4); transition: width .3s, background .3s; }
.game-media .dots i.on { width: 20px; background: #fff; }
.game-media .live-tag { position: absolute; top: 14px; left: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(5,11,31,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.game-media .live-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #39d98a; box-shadow: 0 0 8px #39d98a; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--blue-3); background: rgba(47,123,255,.1); border: 1px solid rgba(47,123,255,.25); }
.chip.live { color: #b9f5d6; background: rgba(57,217,138,.1); border-color: rgba(57,217,138,.3); }
.chip.live b { font-variant-numeric: tabular-nums; color: #fff; }
.chip.live i { width: 8px; height: 8px; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 0 rgba(57,217,138,.6); animation: ping 1.6s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(57,217,138,0); } 100% { box-shadow: 0 0 0 0 rgba(57,217,138,0); } }
.game-stats b { font-variant-numeric: tabular-nums; }
.likebar { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: rgba(169,204,255,.15); overflow: hidden; }
.likebar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #39d98a, #7dffb8); transition: width 1.6s cubic-bezier(.16,1,.3,1) .4s; }
.game.counted .likebar i { width: var(--w); }
.metric.pop { animation: pop .38s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 40% { transform: translateY(-4px) scale(1.04); border-color: rgba(94,162,255,.85); box-shadow: 0 0 34px rgba(47,123,255,.55); } }
.game h3 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.game .by { color: var(--mute); font-size: 14px; margin: 12px 0 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.game .by img { width: 22px; height: 22px; border-radius: 6px; }
.game .sum { color: #c9d8f5; line-height: 1.55; font-size: 16px; }
.game ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 9px; }
.game li { display: flex; gap: 10px; font-size: 15px; color: #c9d8f5; line-height: 1.45; }
.game li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 10px rgba(47,123,255,.8); }
.game-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 22px 0; }
.game-stats div { padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font-size: 12px; color: var(--mute); }
.game-stats b { display: block; color: var(--ink); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.tags span { font-family: var(--mono); font-size: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(47,123,255,.12); color: var(--blue-3); border: 1px solid rgba(47,123,255,.22); }

/* skills: modern Explorer + Properties */
.studio { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.panel { border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.panel-bar { display: flex; align-items: center; gap: 7px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--mute); }
.panel-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(169,204,255,.18); }
.panel-bar span { margin-left: 8px; }
.tree { list-style: none; margin: 0; padding: 10px; font-size: 14.5px; }
.tree li { display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px calc(10px + var(--d) * 20px); border-radius: 10px; cursor: pointer; transition: background .15s; position: relative; }
.tree li:hover { background: rgba(47,123,255,.1); }
.tree li.sel { background: rgba(47,123,255,.24); box-shadow: inset 0 0 0 1px rgba(94,162,255,.4); }
.tree .ico { width: 16px; height: 16px; image-rendering: pixelated; }
.tree .lvl { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--mute); }
.tree .lvl[data-l="Expert"] { color: #7fd0ff; }
.tree .lvl[data-l="Advanced"] { color: #8fb6ff; }
.meter { width: 46px; height: 4px; border-radius: 2px; background: rgba(169,204,255,.15); overflow: hidden; margin-left: 8px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.prop-list { margin: 0; padding: 10px 16px 16px; display: grid; grid-template-columns: 130px 1fr; font-size: 14.5px; }
.prop-list dt, .prop-list dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.prop-list dt { color: var(--mute); font-family: var(--mono); font-size: 13px; }
.prop-list dd { color: var(--ink); line-height: 1.45; }
.prop-list .grp { grid-column: 1 / -1; color: var(--blue-2); font-weight: 600; font-family: var(--font); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }

/* contact */
.contact { text-align: center; padding-top: clamp(320px, 52vh, 480px); padding-bottom: 60px; }
.contact .sub { margin-left: auto; margin-right: auto; }
.contact h2 { font-size: clamp(40px, 7.5vw, 96px); }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 48px auto 0; max-width: 900px; }
.contact-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px; border-radius: 18px; text-decoration: none; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .2s, border-color .2s, background .2s; }
.contact-card:hover { transform: translateY(-4px); border-color: rgba(94,162,255,.55); background: var(--card-2); }
.contact-card .i { width: 22px; height: 22px; color: var(--blue-2); margin-bottom: 14px; }
.contact-card b { font-size: 15px; }
.contact-card small { color: var(--mute); font-size: 13px; font-family: var(--mono); word-break: break-all; }
.contact-card.primary { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; padding: 24px 26px;
  background: linear-gradient(120deg, rgba(88,101,242,.22), rgba(14,28,66,.62) 60%); border-color: rgba(88,101,242,.45); }
.contact-card.primary:hover { border-color: rgba(120,132,255,.8); background: linear-gradient(120deg, rgba(88,101,242,.32), rgba(20,40,92,.6) 60%); }
.dc-icon { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; background: #5865f2; box-shadow: 0 10px 30px -8px rgba(88,101,242,.8); }
.contact-card.primary .dc-icon .i { width: 32px; height: 32px; color: #fff; margin: 0; }
.dc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dc-text b { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.contact-card.primary small { color: var(--mute); font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.dc-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(120,132,255,.5); color: var(--ink); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .2s; }
.contact-card.primary:hover .dc-copy { background: #5865f2; border-color: #5865f2; }
.contact-card.primary .dc-copy .i { width: 16px; height: 16px; margin: 0; color: inherit; }

.foot { position: relative; z-index: 3; display: flex; justify-content: space-between; padding: 28px var(--gutter); color: var(--mute); font-size: 13px; border-top: 1px solid var(--line); }
.foot a { color: var(--mute); }

.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; translate: -50% 200%; visibility: hidden; padding: 12px 18px; border-radius: 14px; background: rgba(14,28,66,.9); border: 1px solid rgba(94,162,255,.4); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 14px; transition: translate .45s cubic-bezier(.2,1.4,.4,1); white-space: nowrap; }
.toast.show { translate: -50% 0; visibility: visible; }

/* speech bubble above my head */
.bubble { position: fixed; z-index: 15; left: 0; top: 0; padding: 8px 14px; border-radius: 14px 14px 14px 4px; background: #fff; color: #0a1a44; font-weight: 700; font-size: 14px; pointer-events: none; opacity: 0; transform-origin: 0 100%; transition: opacity .25s; white-space: nowrap; }
.bubble.on { opacity: 1; }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .nav nav { display: none; }
  .nav-right { margin-left: auto; }
  .big-name { top: 38%; }
  .hero-copy { right: var(--gutter); max-width: none; bottom: 64px; }
  .lead { font-size: 17px; margin-bottom: 16px; }
  .hint { display: none; }
  .scroll-cue { display: none; }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .metric { padding: 14px; }
  .metric:first-child { grid-column: 1 / -1; }
  .game, .studio { grid-template-columns: 1fr; }
  .game[data-side="right"] .game-media { order: 0; }
  .game-stats { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-card.primary { flex-wrap: wrap; gap: 16px; }
  .dc-icon { width: 56px; height: 56px; }
  .dc-copy { margin-left: 0; width: 100%; text-align: center; }
  .prop-list { grid-template-columns: 110px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
}

/* games that are no longer up */
.media-fallback { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.03em; color: rgba(169,204,255,.35);
  background: radial-gradient(80% 80% at 30% 20%, rgba(47,123,255,.25), transparent), repeating-linear-gradient(45deg, rgba(169,204,255,.04) 0 12px, transparent 12px 24px); }
.game-media img { z-index: 1; }
.game-media .dots { z-index: 2; }
.game.past .game-media img { filter: saturate(.75); }
.stamp { position: absolute; z-index: 2; top: 16px; right: 16px; padding: 7px 12px; border-radius: 8px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #ffb4b4; background: rgba(40,6,12,.75); border: 1px solid rgba(255,107,107,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: rotate(3deg); }
.chip.down { color: #ffb4b4; background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.3); }
.chip.down i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; }

/* trailers */
.game-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.play-ico { width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.yt-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(3,7,20,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.yt-modal.on { opacity: 1; visibility: visible; }
.yt-box { position: relative; width: min(1100px, 100%); transform: scale(.96); transition: transform .35s cubic-bezier(.2,1,.3,1); }
.yt-modal.on .yt-box { transform: none; }
.yt-frame { aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 40px 100px -20px rgba(0,0,0,.9); }
.yt-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-close { position: absolute; top: -48px; right: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(14,28,66,.8); font-size: 22px; line-height: 1; cursor: pointer; }

.past-stats { display: flex; align-items: flex-end; gap: 20px; margin: 22px 0 12px; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.ps-main b { display: block; font-size: clamp(34px, 3.4vw, 46px); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.ps-main span { display: block; margin-top: 6px; font-size: 13px; color: var(--mute); }
.ps-bars { flex: 1; display: flex; align-items: flex-end; gap: 4px; height: 56px; min-width: 120px; }
.ps-bars i { flex: 1; height: 0; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--blue-2), rgba(47,123,255,.35)); transition: height .9s cubic-bezier(.16,1,.3,1) var(--d); }
.game.counted .ps-bars i { height: var(--h); }
.ps-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 20px; font-size: 13.5px; color: var(--mute); }
.ps-meta span + span::before { content: "·"; margin-right: 16px; color: rgba(169,204,255,.3); }
.ps-meta b { color: var(--ink); font-weight: 700; }

/* screenshots: click to flip */
.game-media.cycle { cursor: pointer; user-select: none; }
.game-media .dots i { cursor: pointer; padding: 0; }
.game-media.cycle:hover::after { opacity: 1; }

/* the screen slap */
.slap { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.slap .flash { position: absolute; inset: 0; background: #fff; opacity: .55; transition: opacity .35s ease-out; }
.slap svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(255,255,255,.85); stroke-width: 2; stroke-linejoin: round;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.9)) drop-shadow(0 0 6px rgba(160,200,255,.5)); transition: opacity 1.2s ease-in 1.8s; }
.slap.fade .flash { opacity: 0; }
.slap.fade svg { opacity: 0; }

/* each stat card wears its stack's color, so you can tell which is which (especially on phones) */
.metric { position: relative; }
.metric::before { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 4px; border-radius: 0 0 4px 4px; background: var(--c, transparent); box-shadow: 0 0 14px var(--c, transparent); }
.metric span .i { color: var(--c, var(--blue-2)); }

/* carousel: arrows + trailer slide */
.game-media .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s; z-index: 1; }
.trailer-slide { padding: 0; border: 0; background: #000; cursor: pointer; }
.trailer-slide img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .2s; }
.trailer-slide:hover img { opacity: 1; }
.big-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 72px; height: 72px; border-radius: 50%; background: rgba(47,123,255,.9); box-shadow: 0 10px 40px rgba(47,123,255,.6); transition: transform .2s; }
.big-play::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.trailer-slide:hover .big-play { transform: scale(1.08); }
.slide-tag { position: absolute; top: 14px; left: 14px; padding: 6px 11px; border-radius: 999px; background: rgba(5,11,31,.7); font-size: 12px; font-weight: 700; color: #fff; }
.nav-arrow { position: absolute; z-index: 3; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 26px; line-height: 1; color: #fff; background: rgba(5,11,31,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; }
.nav-arrow.prev { left: 12px; } .nav-arrow.next { right: 12px; }
.game-media:hover .nav-arrow { opacity: 1; }
.nav-arrow:hover { background: rgba(47,123,255,.85); }
@media (hover: none) { .nav-arrow { opacity: 1; } }

/* players online right now, in the stats row */
.game-stats .live-stat { border-color: rgba(57,217,138,.35); background: linear-gradient(160deg, rgba(57,217,138,.14), var(--card) 70%); }
.live-stat span { display: flex; align-items: center; gap: 6px; }
.live-stat span i { width: 7px; height: 7px; border-radius: 50%; background: #39d98a; animation: ping 1.6s infinite; }

/* ---------- my time + sky ---------- */
.hint { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-family: var(--mono); font-size: 13px; color: var(--mute); }
.hint b { color: var(--ink); font-weight: 600; font-size: 15px; }
.bg .stars { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 42%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff, transparent), radial-gradient(1px 1px at 63% 30%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 16%, #dfe9ff, transparent), radial-gradient(1px 1px at 88% 48%, #fff, transparent),
    radial-gradient(1px 1px at 8% 62%, #fff, transparent), radial-gradient(1.5px 1.5px at 35% 74%, #cfe0ff, transparent),
    radial-gradient(1px 1px at 56% 58%, #fff, transparent), radial-gradient(1.5px 1.5px at 92% 80%, #fff, transparent);
  background-size: 640px 640px; animation: twinkle 6s ease-in-out infinite; }
@keyframes twinkle { 50% { filter: brightness(.55); } }
html[data-sky="night"] .bg { background: radial-gradient(120% 90% at 50% 10%, #0a1840 0%, #050c26 50%, #02040f 85%); }
html[data-sky="night"] .bg .stars { opacity: .9; }
html[data-sky="dusk"] .bg { background: radial-gradient(120% 90% at 50% 10%, #2a2470 0%, #12164a 45%, #060a22 80%); }
html[data-sky="dusk"] .bg .stars { opacity: .35; }
html[data-sky="day"] .bg { background: radial-gradient(120% 90% at 50% 10%, #1a4bb8 0%, #0c2766 45%, #061230 80%); }

/* ---------- partner links ---------- */
a.partner { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(94,162,255,.6); text-underline-offset: 3px; display: inline-flex; align-items: baseline; gap: 5px; }
a.partner:hover { text-decoration-color: var(--blue-2); }
a.partner img { width: 16px; height: 16px; border-radius: 4px; align-self: center; }

/* ---------- previews open the details ---------- */
.game-media.opens { cursor: zoom-in; }
.game-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(3,7,20,.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.game-modal.on { opacity: 1; visibility: visible; }
.gm-box { position: relative; width: min(1100px, 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; border-radius: 24px; background: #0a1430; border: 1px solid var(--line); box-shadow: 0 40px 120px -30px #000; transform: translateY(20px) scale(.98); transition: transform .4s cubic-bezier(.2,1,.3,1); }
.game-modal.on .gm-box { transform: none; }
.gm-close { position: absolute; z-index: 5; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(5,11,31,.75); font-size: 22px; line-height: 1; cursor: pointer; }
.gm-viewer { position: relative; aspect-ratio: 16 / 9; background: #000; }
.gm-viewer img, .gm-viewer iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.gm-viewer .nav-arrow { opacity: 1; }
.gm-thumbs { display: flex; gap: 8px; padding: 12px 16px 0; overflow-x: auto; }
.gm-thumbs button { position: relative; flex: none; width: 120px; aspect-ratio: 16 / 9; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: #000; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; }
.gm-thumbs button.on, .gm-thumbs button:hover { opacity: 1; }
.gm-thumbs button.on { border-color: var(--blue-2); }
.gm-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gm-thumbs .yt span { position: absolute; inset: auto 6px 6px auto; padding: 2px 7px; border-radius: 6px; background: #ff3b30; font-size: 11px; font-weight: 700; }
.gm-info { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; padding: 24px 28px 30px; }
.gm-info h3 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.035em; }
.gm-info .by { color: var(--mute); font-size: 14px; margin: 10px 0 16px; display: flex; align-items: center; gap: 8px; }
.gm-info .by img { width: 22px; height: 22px; border-radius: 6px; }
.gm-info .sum { color: #c9d8f5; line-height: 1.55; }
.gm-info ul { list-style: none; padding: 0; margin: 16px 0 20px; display: grid; gap: 9px; }
.gm-info li { display: flex; gap: 10px; color: #c9d8f5; font-size: 15px; line-height: 1.45; }
.gm-info li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--blue); }
.gm-facts { margin: 0; align-self: start; display: grid; grid-template-columns: auto 1fr; border-radius: 16px; background: var(--card); border: 1px solid var(--line); padding: 6px 18px; }
.gm-facts dt, .gm-facts dd { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.gm-facts dt { color: var(--mute); font-family: var(--mono); font-size: 12.5px; padding-right: 16px; }
.gm-facts dd { text-align: right; font-weight: 600; }
.gm-facts dt:nth-last-of-type(1), .gm-facts dd:last-child { border-bottom: 0; }

/* ---------- Not just Studio ---------- */
.app { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 48px; }
.app-name { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.app-name h3 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.app-name p { color: var(--blue-2); font-size: 14px; margin-top: 6px; }
.app-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(140deg, #2f7bff, #6a4dff); display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 11px; box-shadow: 0 10px 30px -8px rgba(47,123,255,.8); }
.app-icon i { border-radius: 3px; background: rgba(255,255,255,.9); }
.app-icon i:nth-child(2), .app-icon i:nth-child(3) { background: rgba(255,255,255,.45); }
.app .sum { color: #c9d8f5; line-height: 1.55; }
.app ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 9px; }
.app li { display: flex; gap: 10px; color: #c9d8f5; font-size: 15px; }
.app li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: #39d98a; box-shadow: 0 0 10px rgba(57,217,138,.7); }
.app-window { border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 40px 80px -40px #000; }
.app-inner { padding: 18px 20px 22px; }
.app-label { font-family: var(--mono); font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: .08em; margin: 4px 0 10px; }
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 3px; }
.heat i, .heat-key i { aspect-ratio: 1; border-radius: 3px; background: rgba(169,204,255,.08); }
.heat .l1, .heat-key .l1 { background: rgba(57,217,138,.25); }
.heat .l2, .heat-key .l2 { background: rgba(57,217,138,.45); }
.heat .l3, .heat-key .l3 { background: rgba(57,217,138,.7); }
.heat .l4, .heat-key .l4 { background: #39d98a; }
.heat-key { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 10px 0 14px; font-size: 11px; color: var(--mute); }
.heat-key i { width: 11px; }
.proj { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; padding: 7px 0; font-size: 13.5px; color: #c9d8f5; }
.proj span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.proj i { height: 8px; width: var(--w); border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); transform-origin: left; }

/* ---------- skill cards ---------- */
.skill-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.skill-card { padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .2s, transform .2s; }
.skill-card:hover { border-color: rgba(94,162,255,.5); transform: translateY(-3px); }
.skill-card h3 { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.sk-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(47,123,255,.15); border: 1px solid rgba(47,123,255,.3); }
.sk-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--blue-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skill-card p { color: var(--mute); line-height: 1.55; font-size: 15px; margin: 12px 0 16px; }
.skill-card .chips { margin: 0; }

/* ---------- contact confetti ---------- */
.confetti { position: fixed; z-index: 45; width: 12px; height: 9px; border-radius: 2px; pointer-events: none; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), inset 0 2px 0 rgba(255,255,255,.35); }

@media (max-width: 860px) {
  .gm-info, .app { grid-template-columns: 1fr; }
  .proj { grid-template-columns: 110px 1fr; }
}

/* details popup: fits on screen */
.gm-box { width: min(920px, 100%); max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); }
.gm-viewer { aspect-ratio: auto; height: min(50vh, calc(min(920px, 100vw - 32px) * 9 / 16)); }
.gm-viewer img { object-fit: contain; }
.gm-thumbs button { width: 104px; }
.gm-info { padding: 20px 24px 24px; gap: 24px; }
.gm-info h3 { font-size: clamp(24px, 2.6vw, 34px); }

/* partner link: dashed underline, bigger logo, explanation on hover */
a.partner { position: relative; text-decoration-style: dashed; text-decoration-thickness: 1.5px; }
a.partner img { width: 22px; height: 22px; border-radius: 5px; }
a.partner[data-tip]::after { content: attr(data-tip); position: absolute; z-index: 10; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: 260px;
  translate: -50% 6px; padding: 10px 13px; border-radius: 12px; background: #0f1d44; border: 1px solid rgba(94,162,255,.4); box-shadow: 0 16px 40px -10px #000;
  color: #c9d8f5; font-size: 13px; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal; pointer-events: none; opacity: 0; transition: opacity .2s, translate .2s; }
a.partner[data-tip]:hover::after { opacity: 1; translate: -50% 0; }

/* hero copy: plain and bold, no pills */
.hero-copy .lead { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--ink); margin: 0 0 10px; max-width: 12em; }
.hero-copy .kicker { font-family: var(--font); font-size: 15px; letter-spacing: 0; color: var(--mute); margin: 0 0 20px; }
.hero-copy .kicker::before { display: none; }
.hero-cta { gap: 22px; }
.hero-cta a { font-weight: 700; font-size: 16px; text-decoration: none; color: var(--ink); padding-bottom: 3px; border-bottom: 2px solid var(--blue); transition: color .2s, border-color .2s; }
.hero-cta a::after { content: " →"; color: var(--blue-2); }
.hero-cta a:hover { color: var(--blue-2); border-color: var(--blue-2); }
/* my time, bigger */
.hint { flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.hint b { font-size: clamp(30px, 3vw, 44px); font-family: var(--font); font-weight: 800; letter-spacing: -.03em; text-transform: none; order: 2; }
.hint .sky-ico { display: none; }

/* no live dot on the numbers page */
.metric.live b::after { display: none; }

/* cursor trail bricks: a tiny 2x1 brick with two studs */
.trail { position: fixed; z-index: 60; width: 18px; height: 10px; border-radius: 1.5px; pointer-events: none;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.4); }
.trail::before, .trail::after { content: ""; position: absolute; top: -3px; width: 6px; height: 3.5px; border-radius: 1px 1px 0 0; background: inherit; filter: brightness(1.15); }
.trail::before { left: 2px; } .trail::after { right: 2px; }

/* cursor: dot + trailing ring (from v1) */
body.has-cursor, body.has-cursor * { cursor: none !important; }
.cur-dot, .cur-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 70; will-change: transform; }
.cur-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; mix-blend-mode: difference; }
.cur-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.cur-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); transition: transform .35s cubic-bezier(.2,1,.3,1), border-color .25s, background .25s; }
.cur-ring.hover::before { transform: scale(1.6); border-color: var(--blue-2); background: rgba(47,123,255,.1); }
.cur-ring.down::before { transform: scale(.75); }
body.grabbing .cur-ring::before { transform: scale(1.2); border-color: var(--blue-2); }
body.cursor-out .cur-dot, body.cursor-out .cur-ring { opacity: 0; }