/* tensilegame.com - site look. Colours = the game's (mem:art/style_guide). */
@font-face {
  font-family: "Barlow Condensed";
  src: url("brand/BarlowCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
:root {
  --ground: #0B0C0D;          /* logo ground */
  --ground-2: #111214;
  --ground-3: #17181a;
  --ink: #E9E6DF;             /* logo letters / hud-ink */
  --ink-2: #b9b5ab;
  --ink-3: #7d7a73;
  --graphite: #3a3936;        /* stencils */
  --power: #50B8FF;           /* power-blue (surfaces) */
  --power-deep: #0b3a8c;      /* power-blue-deep, display */
  --spill: #147AFF;           /* PowerSpill (light) */
  --dead: #ff2a1a;            /* DeadPoint red */
  --hazard: #e0b23a;          /* soft yellow hazard paint */
  --backstage: #C4E0A8;       /* backstage green light */
  --bone-a: #cfc8b5;          /* chamber panels, display values */
  --bone-b: #c4bdab;
  --bone-c: #bab3a1;
  --seam: #2b2a27;
  --head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "IBM Plex Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--power); }
img, video { display: block; max-width: 100%; }
.head { font-family: var(--head); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.mono { font-family: var(--mono); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- top bar ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar .mark { width: 34px; height: 34px; opacity: .9; }
.topbar nav { display: flex; gap: 18px; font-family: var(--head); font-weight: 700; letter-spacing: .08em; font-size: 15px; }
.topbar nav a { color: var(--ink-2); text-decoration: none; }
.topbar nav a:hover { color: var(--ink); }
/* links with no real URL yet (sections.js LINKS): stay on the page, do nothing, no hand cursor */
a[data-dead] { cursor: default; }
@media (max-width: 640px) { .topbar nav { display: none; } }

/* ---------- Steam buttons ---------- */
.steam-plain { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; background: var(--ink); color: var(--ground); font-family: var(--head); font-weight: 700; font-size: 22px; letter-spacing: .06em; text-decoration: none; border-radius: 4px; transition: transform .15s, box-shadow .2s; }
.steam-plain:hover { transform: translateY(-1px); box-shadow: 0 0 0 3px rgba(80,184,255,.35), 0 0 30px rgba(80,184,255,.35); }
/* Valve's Steam logo beside the WISHLIST button: its own clear space (gap), 50 px tall = Valve's on-screen minimum;
   wraps to two lines (logo above) on narrow screens */
.steam-cta { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 18px 32px; }
.steam-logo { display: inline-block; line-height: 0; padding: 4px; }
.steam-logo img { height: 50px; width: auto; display: block; }
/* Epic's rules: icon (= full logo height) matches the Steam symbol; clear space = icon height top / bottom, 2x each
   side (row gap 22 px + margin 78 = 100 = 2 x 50; above / below the row's own spacing tops it up past 50). */
.ue-logo { display: inline-block; line-height: 0; margin: 28px 78px; }
.ue-logo img { height: 50px; width: auto; display: block; }
@media (max-width: 640px) { .ue-logo { margin: 18px 34px; } .ue-logo img { height: 28px; } }

.steam-socket { --lens: var(--dead); display: inline-grid; grid-template-columns: 74px auto; align-items: center; gap: 16px; padding: 12px 26px 12px 12px; background: #1b1c1e; border: 2px solid #2c2d30; border-radius: 10px; color: var(--ink); text-decoration: none; font-family: var(--head); font-weight: 700; letter-spacing: .06em; font-size: 22px; line-height: 1.05; position: relative; transition: border-color .25s; }
.steam-socket small { display: block; font-size: 14px; color: var(--ink-3); letter-spacing: .12em; }
.steam-socket .lens { width: 74px; height: 74px; position: relative; display: grid; place-items: center; }
.steam-socket .lens::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--lens) 55%, transparent) 0, transparent 70%); filter: blur(6px); transition: background .3s; }
.steam-socket .lens svg { width: 56px; height: 56px; position: relative; }
.steam-socket .lens .tri { fill: none; stroke: var(--lens); stroke-width: 7; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--lens)); transition: stroke .3s; }
.steam-socket:hover, .steam-socket.live { --lens: var(--power); border-color: rgba(80,184,255,.45); }
.steam-socket.live { box-shadow: 0 0 40px rgba(20,122,255,.25); }

/* ---------- shared sections ---------- */
.sec { padding: 110px 0; position: relative; }
.sec h2 { font-family: var(--head); font-size: clamp(34px, 5vw, 64px); line-height: .95; margin: 0 0 18px; text-transform: uppercase; letter-spacing: .01em; }
.sec .code { font: 12px/1 var(--mono); color: var(--ink-3); letter-spacing: .14em; margin-bottom: 14px; display: block; }
.sec p.lead { color: var(--ink-2); font-size: 18px; max-width: 620px; margin: 0 0 30px; }

.trailer-frame { position: relative; border-radius: 6px; overflow: hidden; background: #000; aspect-ratio: 16/9; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.trailer-frame video { width: 100%; height: 100%; object-fit: cover; }
.trailer-frame .play { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 60%); cursor: pointer; border: 0; color: var(--ink); }
.trailer-frame .play span { width: 96px; height: 96px; border-radius: 50%; border: 2px solid rgba(233,230,223,.7); display: grid; place-items: center; transition: transform .2s, border-color .2s, box-shadow .2s; }
.trailer-frame .play:hover span { transform: scale(1.06); border-color: var(--power); box-shadow: 0 0 30px rgba(80,184,255,.4); }
.trailer-frame .play svg { width: 34px; height: 34px; margin-left: 6px; fill: currentColor; }
.trailer-frame.playing .play { display: none; }

.hooks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .hooks { grid-template-columns: 1fr; } }
.hook { background: var(--ground-2); border: 1px solid rgba(255,255,255,.06); border-radius: 6px; overflow: hidden; }
.hook video { aspect-ratio: 16/10; object-fit: cover; width: 100%; filter: saturate(.95); }
.hook .t { padding: 18px 20px 22px; }
.hook h3 { font-family: var(--head); font-size: 28px; margin: 0 0 6px; text-transform: uppercase; line-height: 1; }
.hook p { color: var(--ink-2); margin: 0; font-size: 15px; }

.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.shots button { padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 4px; overflow: hidden; aspect-ratio: 16/9; }
.shots img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s, filter .35s; filter: brightness(.9); }
.shots button:hover img { transform: scale(1.04); filter: brightness(1.05); }
@media (max-width: 760px) { .shots { grid-template-columns: repeat(2, 1fr); } }
.lightbox { position: fixed; inset: 0; background: rgba(5,5,6,.94); z-index: 100; display: none; place-items: center; cursor: zoom-out; padding: 30px; }
.lightbox.open { display: grid; }
.lightbox img { max-height: 90vh; border-radius: 4px; }

.press { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .press { grid-template-columns: 1fr; } }
.facts { width: 100%; border-collapse: collapse; }
.facts th, .facts td { text-align: left; padding: 14px 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); vertical-align: top; }
.facts th { font-family: var(--head); letter-spacing: .1em; color: var(--ink-3); font-size: 15px; width: 34%; }
.facts td { color: var(--ink); }
.kit { display: grid; gap: 10px; }
.kit a { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--ground-2); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; color: var(--ink); text-decoration: none; font-family: var(--head); font-size: 20px; letter-spacing: .05em; transition: border-color .2s; }
.kit a:hover { border-color: rgba(80,184,255,.5); }
.kit a span { font: 12px var(--mono); color: var(--ink-3); }

.foot { padding: 120px 0 80px; text-align: center; }
.foot .wordmark { width: min(560px, 80vw); margin: 0 auto 34px; }
.foot .links { margin-top: 140px; display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; font-family: var(--head); letter-spacing: .1em; }
.foot .links.logos { margin-top: 18px; }   /* Steam + Unreal logos, under the text links (his 31 Oct call) */
.foot .links a { color: var(--ink-3); text-decoration: none; }
.foot .links a:hover { color: var(--ink); }
.foot .legal { margin-top: 28px; color: var(--ink-3); font-size: 13px; }

/* power states used by mock-ups that "wake" sections */
[data-power="dead"] { --sec-glow: 0; }
[data-power="live"] { --sec-glow: 1; }
.sec[data-power] { transition: filter .6s; }
.sec[data-power="dead"] .dim-when-dead { filter: brightness(.45) saturate(.6); transition: filter .8s; }
.sec[data-power="live"] .dim-when-dead { filter: none; transition: filter .8s; }

/* chamber panel background (right-angle triangles, diagonal alternating = diamond pattern) */
.chamber-bg { background-color: var(--bone-b); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><g stroke='%232b2a27' stroke-width='2' fill='none'><rect x='1' y='1' width='98' height='98' fill='%23cfc8b5'/><rect x='101' y='1' width='98' height='98' fill='%23c6bfad'/><rect x='1' y='101' width='98' height='98' fill='%23c8c1af'/><rect x='101' y='101' width='98' height='98' fill='%23cdc6b3'/><path d='M1 1 L99 99'/><path d='M199 1 L101 99'/><path d='M1 199 L99 101'/><path d='M101 101 L199 199'/></g></svg>"); background-size: 200px 200px; }