/* ChaosVibe — minimalist 16-bit. Pixel art is drawn small (tools/make_pixels.py) and scaled up crisp. */
:root {
  --bg: #0d0b1e; --bg2: #16132e; --cream: #f3ead8; --dim: #9a93bf; --pink: #ff3d7f; --pink2: #c42a62; --line: #2c2752;
  --px: 4px; /* one "pixel" of UI chrome */
  --display: 'Silkscreen', 'Courier New', monospace; --body: 'Pixelify Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--cream); font: 400 18px/1.65 var(--body); overflow-x: hidden; }
a { color: var(--pink); }
img { image-rendering: pixelated; }
.logo { image-rendering: auto; }
b { font-weight: inherit; color: var(--pink); }

/* notched corners: the 16-bit "rounded" box */
.btn, .frame, .badge {
  clip-path: polygon(0 var(--px), var(--px) var(--px), var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%,
    var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
}

/* nav */
nav.top { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 22px clamp(16px, 4vw, 40px); border-bottom: 2px solid var(--line); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--cream); }
.mark { font: 700 34px/1 var(--display); letter-spacing: -0.12em; }
.name { font: 700 20px/1 var(--display); letter-spacing: 0.32em; text-transform: uppercase; display: flex; flex-direction: column; gap: 6px; }
.name small { font: 400 11px/1 var(--display); letter-spacing: 0.62em; color: var(--dim); }
nav .links { display: flex; gap: clamp(14px, 3vw, 40px); }
nav .links a { font: 400 14px/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream); text-decoration: none; padding: 8px 2px; border-bottom: 3px solid transparent; }
nav .links a:hover, nav .links a.on { color: var(--pink); border-bottom-color: var(--pink); }

/* hero */
.hero { max-width: 1240px; margin: 0 auto; padding: clamp(40px, 8vh, 90px) clamp(16px, 4vw, 40px) clamp(30px, 5vh, 60px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(24px, 3vw, 40px); }
.hero .title { position: relative; z-index: 1; }
.hero h1 { font: 700 clamp(38px, 4.5vw, 72px)/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
.sub { display: flex; align-items: center; gap: 18px; margin: 18px 0 26px; font: 400 clamp(14px, 1.8vw, 22px)/1 var(--display); letter-spacing: 0.55em; text-transform: uppercase; }
.sub::before, .sub::after { content: ''; flex: 1; max-width: 90px; height: 3px; background: var(--dim); }
.tag { font: 400 clamp(14px, 1.6vw, 19px)/1.4 var(--display); letter-spacing: 0.3em; text-transform: uppercase; margin: 0 0 34px; }
/* The living hero scene: layers from tools/make_pixels.py, everything placed in scene pixels (192×120).
   back (sky, sun) → twinkling stars → drifting clouds → front (land, castle) → flickering windows → knight → fireflies */
.scene { position: relative;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 55% 46%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 78% at 55% 46%, #000 62%, transparent 100%); }
.scene > img { display: block; width: 100%; height: auto; }
.fx { position: absolute; inset: 0; overflow: hidden; }
.fx > * { position: absolute; display: block; left: calc(var(--x) / 192 * 100%); top: calc(var(--y) / 120 * 100%);
  width: calc(100% / 192); height: calc(100% / 120); image-rendering: pixelated; }
.fx .front { left: 0; top: 0; width: 100%; height: 100%; }

.star { left: calc((var(--x) - 1) / 192 * 100%); top: calc((var(--y) - 1) / 120 * 100%); width: calc(3 / 192 * 100%); height: calc(3 / 120 * 100%);
  background: linear-gradient(var(--cream), var(--cream)) center / 33.4% 33.4% no-repeat, linear-gradient(var(--cream), var(--cream)) center / 33.4% 33.4% no-repeat;
  opacity: .35; animation: twinkle var(--t) steps(1) var(--d) infinite; }
@keyframes twinkle {
  0% { opacity: .35; } 30% { opacity: 1; }
  45% { opacity: 1; background-size: 33.4% 100%, 100% 33.4%; } 55% { opacity: 1; background-size: 33.4% 33.4%, 33.4% 33.4%; }
  70% { opacity: .35; } 100% { opacity: .35; } }

.cloud { width: calc(var(--w) / 192 * 100%); height: calc(6 / 120 * 100%); background: 0 0 / 100% 100% no-repeat;
  animation: drift var(--t) steps(var(--n)) var(--d) infinite; }
@keyframes drift { from { left: calc(var(--w) / -192 * 100%); } to { left: 100%; } }

.win { background: #ffb36b; animation: flicker var(--t) steps(1) var(--d) infinite; }
@keyframes flicker { 0% { opacity: 1; } 18% { opacity: .45; } 24% { opacity: 1; } 61% { opacity: .7; } 66% { opacity: 1; } 80% { opacity: .55; } 84% { opacity: 1; } }

/* the knight's cape in the wind: a 4-frame strip of KNIGHT_BOX (58,68 → 88,90) */
.fx .knight { left: calc(58 / 192 * 100%); top: calc(68 / 120 * 100%); width: calc(30 / 192 * 100%); height: calc(22 / 120 * 100%);
  background: url(img/px-knight.png) 0 0 / 400% 100% no-repeat; animation: cape 1s steps(4) infinite; }
@keyframes cape { to { background-position: 133.333% 0; } }

.fly { background: #ffe58a; opacity: 0; animation: fly var(--t) steps(16) var(--d) infinite; }
@keyframes fly {
  0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 35% { transform: translate(200%, -300%); opacity: .5; }
  55% { transform: translate(400%, -200%); opacity: 1; } 80% { transform: translate(300%, -500%); opacity: .6; }
  100% { transform: translate(600%, -400%); opacity: 0; } }

/* buttons */
.cta { display: flex; flex-wrap: wrap; gap: 16px; }
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 26px; text-decoration: none; text-transform: uppercase;
  font: 700 14px/1 var(--display); letter-spacing: 0.22em; color: var(--cream); background: var(--pink); box-shadow: inset 0 calc(var(--px) * -1) 0 var(--pink2); }
.btn:hover { background: #ff5a93; }
.btn:active { box-shadow: none; transform: translateY(2px); }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 3px var(--cream); }
.btn.ghost:hover { box-shadow: inset 0 0 0 3px var(--pink); color: var(--pink); }
.tri { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid var(--cream); }

/* develop / create / play */
.pillars { max-width: 900px; margin: 0 auto; padding: 10px 16px clamp(50px, 9vh, 90px); display: grid; grid-template-columns: repeat(3, 1fr); }
.pillars div { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 6px 10px; }
.pillars div + div { border-left: 3px solid var(--line); }
.px-icon { height: 48px; width: auto; }
.pillars span { font: 400 16px/1 var(--display); letter-spacing: 0.4em; text-transform: uppercase; padding-left: 0.4em; }

/* sections */
main section { max-width: 1240px; margin: 0 auto; padding: clamp(50px, 9vh, 90px) clamp(16px, 4vw, 40px) 0; }
.kicker { font: 400 14px/1 var(--display); letter-spacing: 0.5em; text-transform: uppercase; color: var(--pink); margin: 0 0 28px;
  display: flex; align-items: center; gap: 18px; }
.kicker::after { content: ''; flex: 1; height: 2px; background: var(--line); }
.big { font: 400 clamp(20px, 2.6vw, 30px)/1.45 var(--display); letter-spacing: 0.04em; margin: 0 0 26px; max-width: 900px; }

.frame { margin: 0; padding: var(--px); background: var(--line); }
.frame img { display: block; width: 100%; height: auto; image-rendering: auto; } /* game shots stay as captured */

.game { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.badge { display: inline-block; margin: 0 0 18px; padding: 8px 14px; background: var(--bg2); color: var(--pink); font: 400 12px/1 var(--display); letter-spacing: 0.25em; text-transform: uppercase; }
.info .logo { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 0 14px; }
.info p { margin: 0 0 18px; color: #d8d0e8; }
.facts { margin: 0 0 26px; display: grid; gap: 8px; }
.facts div { display: flex; gap: 14px; }
.facts dt { width: 100px; flex: none; font: 400 12px/1.9 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.facts dd { margin: 0; }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(20px, 3vw, 32px); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; color: #d8d0e8; }
.cols p { margin: 0; }
.contact { padding-bottom: clamp(60px, 10vh, 110px) !important; }
.contact .big a { color: var(--pink); text-decoration-thickness: 3px; text-underline-offset: 6px; overflow-wrap: anywhere; }

footer { border-top: 2px solid var(--line); padding: 26px 16px; text-align: center; color: var(--dim); font: 400 12px/1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .scene { order: -1; }
  .game { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 560px) {
  nav.top { justify-content: center; }
  nav .links { gap: 14px; }
  nav .links a { font-size: 12px; letter-spacing: 0.12em; }
  .pillars span { font-size: 12px; letter-spacing: 0.25em; }
  .px-icon { height: 36px; }
  .shots { grid-template-columns: 1fr 1fr; }
  .shots .frame:last-child { display: none; }
  .btn { padding: 14px 18px; letter-spacing: 0.15em; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .fx > * { animation: none !important; } .fly { display: none; } }