/* MINDS CLASH website (/home, /arena, /island, /ai, /cup): pixel look of the game, light and dark */
:root {
  --ink: #2b2340; --paper: #fff8e4; --cream: #f7f1e3; --lime: #c6f432; --gold: #ffc93c; --sky: #5ec8ff; --violet: #9b6bff; --red: #ff5a5f;
  --text: #2b2340; --muted: #6b6280; --bg: #f7f1e3; --card: #fffdf6; --line: #2b2340;
  --font: 'Nunito', system-ui, sans-serif; --title: 'Lilita One', 'Nunito', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --text: #f3ecff; --muted: #b9b0d0; --bg: #17122a; --card: #231b3d; --paper: #2d2450; --cream: #1d1733; }
}
:root[data-theme="dark"] { --text: #f3ecff; --muted: #b9b0d0; --bg: #17122a; --card: #231b3d; --paper: #2d2450; --cream: #1d1733; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 600 17px/1.55 var(--font); overflow-x: hidden; }
img { max-width: 100%; }
a { color: inherit; }
.px-img { image-rendering: pixelated; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(43, 35, 64, .92); backdrop-filter: blur(6px); color: #fff; box-shadow: 0 3px 0 #000; }
.nav .wrap { display: flex; align-items: center; gap: 14px; height: 60px; }
.logo { display: flex; align-items: center; gap: 8px; font: 400 24px var(--title); text-decoration: none; letter-spacing: .5px; white-space: nowrap; }
.logo img { width: 30px; height: 30px; } .logo b { color: var(--lime); font-weight: 400; }
.nav nav { display: flex; gap: 4px; margin-left: auto; }
.nav nav a { text-decoration: none; padding: 6px 10px; font-weight: 800; font-size: 15px; opacity: .85; }
.nav nav a:hover, .nav nav a.on { opacity: 1; background: rgba(255, 255, 255, .12); }
.nav .btn { margin-left: 6px; }
.menu { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; }
@media (max-width: 860px) {
  .menu { display: block; } .nav nav { display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; background: var(--ink); padding: 8px 16px 14px; box-shadow: 0 3px 0 #000; }
  .nav.open nav { display: flex; } .nav nav a { padding: 10px; font-size: 17px; } .nav .btn.hide-sm { display: none; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; cursor: pointer; text-decoration: none; font: 900 17px var(--font); color: var(--ink); background: var(--lime); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink); transition: transform .08s; }
.btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(3px); box-shadow: 0 0 0 3px var(--ink), 0 2px 0 var(--ink); }
.btn.gold { background: var(--gold); } .btn.ghost { background: #fff; } .btn.small { padding: 7px 14px; font-size: 15px; box-shadow: 0 0 0 3px var(--ink), 0 4px 0 var(--ink); }

/* hero */
.hero { position: relative; min-height: min(86vh, 760px); display: grid; align-items: end; overflow: hidden; color: #fff; background: #f2b46a url(/assets/site_hero.webp) center top / cover no-repeat; }
.hero.alt { min-height: min(62vh, 560px); }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 18, 42, 0) 35%, rgba(23, 18, 42, .82) 100%); pointer-events: none; }
.hero .wrap { position: relative; z-index: 3; padding-bottom: 56px; width: 100%; }
.hero h1 { margin: 0; font: 400 clamp(44px, 8vw, 92px)/.95 var(--title); text-shadow: 0 5px 0 var(--ink), 0 0 30px rgba(0, 0, 0, .35); letter-spacing: 1px; }
.hero h1 b { color: var(--lime); font-weight: 400; }
.hero p.lead { max-width: 620px; font-size: clamp(17px, 2.2vw, 21px); font-weight: 800; text-shadow: 0 2px 0 rgba(0, 0, 0, .5); margin: 14px 0 22px; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.kicker { display: inline-block; background: var(--ink); color: var(--lime); font: 900 13px var(--font); letter-spacing: 1.5px; text-transform: uppercase; padding: 4px 10px; margin-bottom: 12px; }
/* twinkling pixel sparkles over the painted sky */
.clouds { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.clouds i { position: absolute; display: block; width: 6px; height: 6px; background: #fff; box-shadow: 0 -6px 0 #fff, 0 6px 0 #fff, -6px 0 0 #fff, 6px 0 0 #fff; opacity: 0; animation: twinkle ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .95; transform: scale(1.2); } }
/* the Minds standing in the hero */
/* the Minds in the hero: framed pixel cards on the right, each bobbing on its own beat */
.squad { position: absolute; z-index: 4; right: max(16px, calc((100vw - 1120px) / 2 + 16px)); bottom: 56px; display: grid; grid-template-columns: repeat(3, auto); gap: 14px; pointer-events: none; }
.squad img { width: clamp(76px, 8vw, 118px); background: #fff8e4; box-shadow: 0 0 0 4px var(--ink), 0 8px 0 var(--ink); animation: bob 2.4s ease-in-out infinite; }
.squad img:nth-child(2) { animation-delay: -.6s; } .squad img:nth-child(3) { animation-delay: -1.2s; } .squad img:nth-child(4) { animation-delay: -1.8s; grid-column: 2; } .squad img:nth-child(5) { animation-delay: -.3s; }
.squad img:nth-child(odd) { rotate: -3deg; } .squad img:nth-child(even) { rotate: 3deg; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (max-width: 1000px) { .squad { display: none; } }

/* sections */
section { padding: 72px 0; }
section.tint { background: var(--cream); }
section.dark { background: var(--ink); color: #fff; } section.dark .muted { color: #c9c0e0; }
h2.title { font: 400 clamp(32px, 5vw, 52px)/1.05 var(--title); margin: 0 0 10px; }
h3 { font: 400 26px/1.15 var(--title); margin: 0 0 6px; }
.muted { color: var(--muted); }
.sub { max-width: 680px; font-size: 19px; margin: 0 0 30px; }
.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--card); box-shadow: 0 0 0 3px var(--line), 0 8px 0 var(--line); padding: 20px; position: relative; }
section.dark .card { --line: #000; color: var(--text); }
.card .ic { font-size: 40px; line-height: 1; display: block; margin-bottom: 8px; }
.card.link { text-decoration: none; display: block; transition: transform .12s; } .card.link:hover { transform: translateY(-5px) rotate(-.4deg); }
.card .more { font-weight: 900; color: var(--violet); }
.card.pic { padding: 0; overflow: hidden; } .card.pic > img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; } .card.pic .in { padding: 18px 20px 20px; }
.split { display: grid; gap: 40px; grid-template-columns: 1fr 1fr; align-items: center; }
.split.flip > :first-child { order: 2; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .split.flip > :first-child { order: 0; } }
.ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.ticks li { padding-left: 32px; position: relative; } .ticks li::before { content: '✦'; position: absolute; left: 4px; color: var(--violet); font-weight: 900; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { counter-increment: s; background: var(--card); padding: 18px 18px 18px 64px; position: relative; box-shadow: 0 0 0 3px var(--line), 0 6px 0 var(--line); }
.steps li::before { content: counter(s); position: absolute; left: 14px; top: 14px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--lime); color: var(--ink); font: 400 24px var(--title); box-shadow: 0 0 0 3px var(--ink); }
.steps b { display: block; font-size: 18px; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s, transform .6s; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }

/* 🃏 duel demo */
.duel { position: relative; background: #3a2c5e url(/assets/stage_castle.webp) center / cover; box-shadow: 0 0 0 4px #000, 0 10px 0 #000; padding: 18px; color: #fff; min-height: 360px; overflow: hidden; }
.duel::before { content: ''; position: absolute; inset: 0; background: rgba(20, 14, 40, .45); }
.duel > * { position: relative; }
.duel .score { display: flex; justify-content: space-between; font: 900 15px var(--font); }
.duel .score b { font: 400 30px var(--title); color: var(--gold); display: block; }
.duel .crown { margin: 6px auto 0; width: 108px; height: 108px; display: grid; place-items: center; background: url(/assets/crown.png) center 6px / 76px no-repeat; text-align: center; }
.duel .crown b { font: 400 34px var(--title); margin-top: 34px; text-shadow: 0 3px 0 #000; color: #fff; }
.duel .hint { text-align: center; font-weight: 900; font-size: 13px; letter-spacing: 1px; opacity: .9; }
.duel .table { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 8px; }
.duel .side { display: grid; justify-items: center; gap: 6px; width: 40%; }
.duel .side img { width: 92px; animation: bob 2.2s ease-in-out infinite; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .4)); }
.duel .side.r img { transform: scaleX(-1); animation-name: bobflip; }
@keyframes bobflip { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-10px); } }
.duel .name { font-weight: 900; font-size: 14px; background: rgba(0, 0, 0, .45); padding: 1px 8px; }
.pcard { width: 66px; height: 92px; perspective: 600px; }
.pcard .f { position: relative; width: 100%; height: 100%; transition: transform .5s; transform-style: preserve-3d; }
.pcard.show .f { transform: rotateY(180deg); }
.pcard .a, .pcard .b { position: absolute; inset: 0; backface-visibility: hidden; box-shadow: 0 0 0 3px #000; }
.pcard .a { background: url(/assets/card_back.webp) center / cover; }
.pcard .b { transform: rotateY(180deg); background: #fff8e4; color: var(--ink); display: grid; place-items: center; font: 400 44px var(--title); }
.pcard.win .b { background: var(--lime); animation: pop .5s; } .pcard.lose .b { background: #d9d2e8; color: #8a80a0; }
@keyframes pop { 50% { transform: rotateY(180deg) scale(1.15); } }
.duel .say { text-align: center; min-height: 28px; font-weight: 900; margin-top: 10px; text-shadow: 0 2px 0 #000; }
.duel .spell { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(0); font: 400 28px var(--title); background: var(--violet); padding: 4px 14px; box-shadow: 0 0 0 3px #000; transition: transform .25s; white-space: nowrap; }
.duel .spell.on { transform: translate(-50%, -50%) scale(1); }
.flying { position: absolute; width: 40px; pointer-events: none; z-index: 5; transition: all .7s cubic-bezier(.5, -0.3, .6, 1.3); }

/* 🏝️ island demo */
.isle { position: relative; aspect-ratio: 4/3; background: url(/assets/sky_island.webp) center / cover; box-shadow: 0 0 0 4px #000, 0 10px 0 #000; overflow: hidden; }
.isle .land { position: absolute; left: 10%; right: 10%; top: 28%; bottom: 14%; background: #7cc95b; box-shadow: 0 0 0 4px #3f7a2e, 0 22px 0 #8a5a3b, 0 26px 0 #000; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); gap: 3px; padding: 8px; }
.isle .t { background: #6db84f; display: grid; place-items: center; font-size: clamp(14px, 2.4vw, 24px); transition: background .4s; }
.isle .t.soil { background: #9a6a45; } .isle .t.b { background: transparent; font-size: clamp(22px, 4vw, 40px); }
.isle .t .grow { animation: grow 1s ease-out; display: inline-block; }
@keyframes grow { from { transform: scale(0) translateY(10px); } }
.isle .walker { position: absolute; width: 44px; z-index: 3; transition: left 1.1s linear, top 1.1s linear; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)); }
.isle .bub { position: absolute; z-index: 4; background: #fff; color: var(--ink); font: 900 12px var(--font); padding: 2px 6px; box-shadow: 0 0 0 2px #000; white-space: nowrap; transform: translate(-30%, -120%); }
.isle .hud { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 8px; z-index: 5; font: 900 14px var(--font); }
.isle .hud span { background: rgba(43, 35, 64, .85); color: #fff; padding: 3px 10px; box-shadow: 0 0 0 2px #000; }

/* 🧠 AI demo: a chat between the game and the player's AI */
.chatdemo { background: var(--card); box-shadow: 0 0 0 4px var(--line), 0 10px 0 var(--line); padding: 16px; display: grid; gap: 10px; min-height: 380px; align-content: start; font-size: 15px; }
.chatdemo .head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 3px dashed rgba(127, 127, 127, .3); }
.chatdemo .head img { width: 46px; height: 46px; background: var(--paper); box-shadow: 0 0 0 2px var(--line); }
.chatdemo .head small { display: block; color: var(--muted); font-size: 13px; }
.msg { max-width: 88%; padding: 8px 12px; box-shadow: 0 0 0 2px var(--line); animation: msgin .35s ease-out; white-space: pre-line; }
.msg.game { background: var(--paper); justify-self: start; } .msg.ai { background: var(--lime); color: var(--ink); justify-self: end; } .msg.act { justify-self: center; background: var(--ink); color: #fff; font-weight: 900; font-size: 14px; }
.msg.typing::after { content: '…'; animation: blink 1s steps(2) infinite; }
@keyframes msgin { from { opacity: 0; transform: translateY(10px); } }
@keyframes blink { 50% { opacity: 0; } }
.badge { display: inline-flex; gap: 6px; align-items: center; font: 900 13px var(--font); background: #fff; color: var(--ink); padding: 3px 10px; box-shadow: 0 0 0 2px var(--ink); }

/* ⚔️ Minds parade */
.parade { overflow: hidden; padding: 26px 0 10px; background: linear-gradient(#bfe7ff, #e8f7ff); border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }
.parade .row { display: flex; gap: 18px; width: max-content; animation: march 60s linear infinite; }
.parade .row.slow { animation-duration: 90s; animation-direction: reverse; margin-top: 10px; }
.parade img { width: 84px; height: 84px; image-rendering: pixelated; animation: hop .7s ease-in-out infinite; }
.parade img:nth-child(odd) { animation-delay: -.35s; }
@keyframes march { to { transform: translateX(-50%); } }
@keyframes hop { 50% { transform: translateY(-6px); } }

/* 🏆 cup */
.boss { aspect-ratio: 16/9; background: #3b1414 url(/assets/sky_storm.webp) center / cover; box-shadow: 0 0 0 4px #000, 0 10px 0 #000; position: relative; overflow: hidden; display: grid; place-items: center; }
.boss .keep { font-size: clamp(60px, 12vw, 120px); filter: drop-shadow(0 0 20px #ff6a00); animation: bob 3s ease-in-out infinite; }
.boss .ember { position: absolute; bottom: -10px; width: 6px; height: 6px; background: #ffb347; box-shadow: 0 0 8px #ff6a00; animation: rise linear infinite; }
@keyframes rise { to { transform: translateY(-110vh); opacity: 0; } }
.boss .bar { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); color: #fff; padding: 8px 14px; display: flex; justify-content: space-between; font: 900 15px var(--font); }
.stars { color: var(--gold); letter-spacing: 3px; }

/* faq + footer */
details.faq { background: var(--card); box-shadow: 0 0 0 3px var(--line); padding: 14px 18px; margin-bottom: 12px; }
details.faq summary { cursor: pointer; font-weight: 900; font-size: 18px; } details.faq p { margin: 10px 0 0; }
.bigcta { text-align: center; background: var(--violet) url(/assets/sky_aurora.webp) center / cover; color: #fff; position: relative; }
.bigcta::before { content: ''; position: absolute; inset: 0; background: rgba(43, 35, 64, .55); } .bigcta .wrap { position: relative; }
.bigcta h2 { text-shadow: 0 4px 0 #000; }
footer { background: #120e22; color: #c9c0e0; padding: 34px 0; font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; } footer a { text-decoration: none; } footer a:hover { color: #fff; }

/* ===================== v2: night-sky premium look (all pages) ===================== */
:root, :root[data-theme="light"] { --text: #f3ecff; --muted: #b9b0d0; --bg: #120d24; --card: #1f1838; --paper: #2a2150; --cream: #181230; --line: #000;
  --pixel: 'Pixelify Sans', 'Lilita One', system-ui, sans-serif; --glow: 0 0 24px rgba(198, 244, 50, .55); }
body { background: radial-gradient(1200px 600px at 80% -10%, rgba(155, 107, 255, .18), transparent 60%), radial-gradient(900px 500px at -10% 30%, rgba(94, 200, 255, .10), transparent 60%), var(--bg); }
::selection { background: var(--lime); color: var(--ink); }
.nav { position: fixed; left: 0; right: 0; background: rgba(18, 13, 36, .35); backdrop-filter: blur(14px) saturate(1.4); box-shadow: none; border-bottom: 1px solid rgba(255, 255, 255, .08); transition: background .3s; }
.nav.solid { background: rgba(18, 13, 36, .92); }
.nav nav a { position: relative; } .nav nav a:not(.btn)::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.nav nav a:not(.btn):hover::after, .nav nav a.on::after { transform: none; } .nav nav a:hover, .nav nav a.on { background: none; }
.logo { font-family: var(--pixel); font-weight: 700; letter-spacing: 1px; }
.btn { font-family: var(--pixel); font-weight: 700; letter-spacing: .5px; position: relative; overflow: hidden; }
.btn::before { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); transition: left .6s; }
.btn:hover::before { left: 130%; }
.btn.glow { box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), var(--glow); animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 3px var(--ink), 0 6px 0 var(--ink), 0 0 42px rgba(198, 244, 50, .85); } }
.btn.ghost { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 6px 0 rgba(0, 0, 0, .6); backdrop-filter: blur(6px); }
h2.title, .hero h1 { font-family: var(--pixel); font-weight: 700; letter-spacing: .5px; }
h3 { font-family: var(--pixel); font-weight: 700; }
.kicker { font-family: var(--pixel); background: rgba(198, 244, 50, .12); color: var(--lime); box-shadow: inset 0 0 0 2px rgba(198, 244, 50, .5); }
.card { background: linear-gradient(160deg, #261d45, #1a1433); box-shadow: 0 0 0 2px rgba(255, 255, 255, .1), 0 18px 40px rgba(0, 0, 0, .35); color: var(--text); }
section.tint { background: linear-gradient(180deg, #181230, #1d1638); }
section.dark { background: #0b0818; }
.steps li { background: linear-gradient(160deg, #261d45, #1a1433); box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); }
details.faq { background: #1d1638; box-shadow: 0 0 0 2px rgba(255, 255, 255, .1); }
.chatdemo { background: #17122c; box-shadow: 0 0 0 2px rgba(198, 244, 50, .35), 0 0 60px rgba(155, 107, 255, .25); }
.msg.game { background: #2a2150; color: #f3ecff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); } .msg.ai { box-shadow: 0 0 0 2px #000; } .msg.act { background: #000; box-shadow: 0 0 0 2px var(--gold); color: var(--gold); }
.parade { background: linear-gradient(#1b2b52, #12203d); border-color: #000; }

/* castle-battlement pixel edge on top of a section */
.edge { position: relative; }
.edge::before { content: ''; position: absolute; left: 0; right: 0; top: -24px; height: 24px; z-index: 2; pointer-events: none;
  background: linear-gradient(var(--edge, #181230), var(--edge, #181230)) bottom / 100% 12px no-repeat, repeating-linear-gradient(90deg, var(--edge, #181230) 0 24px, transparent 24px 48px) top / 100% 12px no-repeat; }

/* hero with a gameplay video */
.hero.video { min-height: 100svh; background: #0b0818; align-items: center; }
.hero.video.alt { min-height: 78svh; align-items: end; } .hero.video.alt .wrap { padding-bottom: 70px; }
.hero .bgvid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transform: scale(1.06); filter: saturate(1.15) contrast(1.05); }
.hero.video::after { background: radial-gradient(ellipse at 30% 60%, rgba(11, 8, 24, .25), rgba(11, 8, 24, .85) 78%), linear-gradient(180deg, rgba(11, 8, 24, .55) 0%, rgba(11, 8, 24, 0) 30%, rgba(11, 8, 24, .25) 60%, #120d24 100%); }
.scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px); }
.hero h1.mega { font-size: clamp(54px, 11vw, 150px); line-height: .9; color: #fff; text-shadow: 0 6px 0 #000, 0 0 40px rgba(255, 201, 60, .35); position: relative; }
.hero h1.mega b { color: var(--lime); text-shadow: 0 6px 0 #000, 0 0 40px rgba(198, 244, 50, .45); }
.shine { position: relative; display: inline-block; }
.shine::after { content: attr(data-text); position: absolute; inset: 0; background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) -200% 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; animation: sweep 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes sweep { 0%, 55% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.typer { font-family: var(--pixel); font-size: clamp(20px, 3vw, 30px); color: var(--lime); min-height: 1.4em; margin: 16px 0 6px; text-shadow: 0 0 18px rgba(198, 244, 50, .5); }
.typer::after { content: '▌'; animation: blink .8s steps(2) infinite; margin-left: 2px; }
.hero .lead { max-width: 560px; color: #e6defa; }
.scrollcue { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); color: #fff; font: 700 13px var(--pixel); letter-spacing: 2px; display: grid; justify-items: center; gap: 6px; opacity: .8; text-decoration: none; }
.scrollcue i { width: 22px; height: 34px; border: 3px solid #fff; position: relative; } .scrollcue i::after { content: ''; position: absolute; left: 50%; top: 5px; width: 4px; height: 8px; margin-left: -2px; background: var(--lime); animation: cue 1.6s infinite; }
@keyframes cue { 70% { transform: translateY(12px); opacity: 0; } }
#fx { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; }

/* lime ticker */
.ticker { background: var(--lime); color: var(--ink); overflow: hidden; border-block: 4px solid #000; transform: rotate(-1.2deg); margin: -14px -20px 0; position: relative; z-index: 4; box-shadow: 0 12px 40px rgba(198, 244, 50, .25); }
.ticker div { display: flex; width: max-content; animation: march 28s linear infinite; font: 700 clamp(18px, 2.4vw, 28px)/1 var(--pixel); padding: 14px 0; gap: 34px; white-space: nowrap; }
.ticker span::after { content: '✦'; margin-left: 34px; color: var(--violet); }

/* scroll story: a sticky screen whose video changes with the chapter you read */
.story { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.story .screen { position: sticky; top: calc(50vh - 220px); }
.frame { position: relative; padding: 14px; background: linear-gradient(160deg, #3a2e66, #1c1535); box-shadow: 0 0 0 4px #000, 0 0 0 7px #3a2e66, 0 30px 80px rgba(0, 0, 0, .6), 0 0 80px rgba(155, 107, 255, .25); }
.frame .vids { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s, transform 1.2s; transform: scale(1.04); }
.frame video.on { opacity: 1; transform: none; }
.frame .scan { opacity: .45; z-index: 2; }
.frame .label { position: absolute; z-index: 3; left: 12px; top: 12px; font: 700 13px var(--pixel); background: #000; color: var(--lime); padding: 3px 8px; letter-spacing: 1px; }
.frame .label::before { content: '● '; color: var(--red); animation: blink 1.2s steps(2) infinite; }
.frame .dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; } .frame .dots i { width: 26px; height: 6px; background: rgba(255, 255, 255, .2); transition: background .3s; } .frame .dots i.on { background: var(--lime); }
.chapters { display: grid; gap: 30vh; padding: 12vh 0 34vh; }
.chapter { opacity: .25; transition: opacity .5s, transform .5s; transform: translateX(24px); }
.chapter.on { opacity: 1; transform: none; }
.chapter .num { font: 700 70px/1 var(--pixel); -webkit-text-stroke: 2px var(--lime); color: transparent; display: block; margin-bottom: 6px; }
.chapter h3 { font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 10px; }
.chapter p { color: #d8cff0; font-size: 18px; }
.chapter video { display: none; }
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr; } .story .screen { display: none; } .chapters { gap: 64px; padding: 0; }
  .chapter { opacity: 1; transform: none; } .chapter video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-top: 14px; box-shadow: 0 0 0 3px #000, 0 0 0 6px #3a2e66; }
}

/* mode cards: tilt, gloss, and the mode's own video on hover */
.tilt { transform-style: preserve-3d; transition: transform .2s ease-out; will-change: transform; }
.tilt .gloss { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .22), transparent 45%); opacity: 0; transition: opacity .3s; z-index: 3; }
.tilt:hover .gloss { opacity: 1; }
.card.pic .media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.card.pic .media img, .card.pic .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s, opacity .4s; }
.card.pic .media video { opacity: 0; } .card.pic:hover .media video { opacity: 1; } .card.pic:hover .media img { transform: scale(1.08); }
.card.pic .tag { position: absolute; z-index: 2; left: 10px; top: 10px; font: 700 12px var(--pixel); background: rgba(0, 0, 0, .7); color: var(--gold); padding: 2px 8px; }

/* stagger reveal for children */
.stagger > * { opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .7s, transform .7s; }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > :nth-child(2) { transition-delay: .08s; } .stagger.in > :nth-child(3) { transition-delay: .16s; } .stagger.in > :nth-child(4) { transition-delay: .24s; } .stagger.in > :nth-child(5) { transition-delay: .32s; } .stagger.in > :nth-child(6) { transition-delay: .4s; } .stagger.in > :nth-child(7) { transition-delay: .48s; }

/* aurora glow behind a section */
.aurora { position: relative; overflow: hidden; }
.aurora::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg at 50% 50%, rgba(155, 107, 255, .25), rgba(94, 200, 255, .18), rgba(198, 244, 50, .15), rgba(155, 107, 255, .25)); filter: blur(70px); animation: spin 22s linear infinite; pointer-events: none; }
.aurora > * { position: relative; }
@keyframes spin { to { transform: rotate(1turn); } }

/* final call */
.bigcta { background: #0b0818; overflow: hidden; }
.bigcta::before { background: radial-gradient(ellipse at 50% 120%, rgba(255, 201, 60, .35), transparent 60%); }
.bigcta .crownbig { width: 110px; image-rendering: pixelated; animation: bob 2.6s ease-in-out infinite; filter: drop-shadow(0 0 30px rgba(255, 201, 60, .7)); }

/* intro: the page appears through a grid of pixels */
#pxin { position: fixed; inset: 0; z-index: 100; display: grid; pointer-events: none; }
#pxin i { background: #0b0818; transition: opacity .3s; }
#pxin i.go { opacity: 0; }

/* trailer modal */
.reel { position: fixed; inset: 0; z-index: 90; background: rgba(5, 3, 12, .92); display: none; place-items: center; padding: 16px; }
.reel.on { display: grid; } .reel video { width: min(1100px, 100%); box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--lime), 0 0 80px rgba(198, 244, 50, .4); }
.reel .x { position: absolute; top: 16px; right: 16px; }

/* pixel sparkles behind the pointer (desktop) */
.spark { position: fixed; z-index: 95; width: 6px; height: 6px; pointer-events: none; background: var(--gold); box-shadow: 0 0 6px var(--gold); animation: sparkfade .7s ease-out forwards; }
@keyframes sparkfade { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ticker div, .aurora::before, .shine::after { animation: none; } }

/* ===================== v3: speed, readability, pixel icons, the hero Mind ===================== */
/* lighter effects: no live blur behind the bar, a still aurora, the parade only slides */
.nav { backdrop-filter: none; background: rgba(18, 13, 36, .78); } .nav.solid { background: rgba(18, 13, 36, .96); }
.aurora::before { animation: none; filter: none; inset: 0; background: radial-gradient(60% 70% at 15% 30%, rgba(155, 107, 255, .28), transparent 70%), radial-gradient(50% 60% at 90% 80%, rgba(94, 200, 255, .2), transparent 70%); }
.parade img { animation: none; }
.frame video { opacity: 1; transform: none; transition: none; }
.frame .wipe { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(90deg, #0b0818 0 40px, transparent 40px 80px); transform: scaleY(0); }
.frame .wipe.go { animation: wipe .5s steps(6) both; }
@keyframes wipe { 0% { transform: scaleY(0); } 45%, 55% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
/* text stays readable on bright footage: a dark panel behind the hero copy */
.hero .copy { max-width: 640px; padding: 26px 28px 30px; background: linear-gradient(135deg, rgba(11, 8, 24, .82), rgba(11, 8, 24, .55)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .45); }
.hero.video::after { background: linear-gradient(90deg, rgba(11, 8, 24, .75) 0%, rgba(11, 8, 24, .25) 55%, rgba(11, 8, 24, .55) 100%), linear-gradient(180deg, rgba(11, 8, 24, .5), transparent 25%, transparent 70%, #120d24); }
.hero .lead, .hero p { text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
/* pixel icons (the game's own sprites and icons) */
.pxi { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; display: block; margin-bottom: 10px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .45)); }
.pxi.sm { width: 28px; height: 28px; display: inline-block; vertical-align: -6px; margin: 0 6px 0 0; filter: none; }
.pxrow { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; } .pxrow .pxi { margin: 0; width: 44px; height: 44px; }
.card .pxi { transition: transform .25s; } .card:hover .pxi { transform: translateY(-4px) scale(1.06); }
/* filmed clip in a frame (replaces the old code-drawn demos) */
.clip { position: relative; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 0 0 4px #000, 0 0 0 7px #3a2e66, 0 24px 60px rgba(0, 0, 0, .5); overflow: hidden; }
.clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clip .label { position: absolute; left: 10px; top: 10px; font: 700 12px var(--pixel); background: #000; color: var(--lime); padding: 3px 8px; letter-spacing: 1px; } .clip .label::before { content: '● '; color: var(--red); }
/* 🧠 the hero Mind */
.pal { position: absolute; z-index: 4; right: max(24px, calc((100vw - 1120px) / 2 + 24px)); bottom: 12vh; width: 260px; display: grid; justify-items: center; gap: 10px; user-select: none; }
.pal img { width: 220px; height: 220px; image-rendering: pixelated; cursor: pointer; transform: rotate(var(--lean, 0deg)); transition: transform .2s; animation: palidle 2.6s ease-in-out infinite; filter: drop-shadow(0 14px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 30px rgba(198, 244, 50, .25)); }
.pal img.hop { animation: palhop .55s cubic-bezier(.3, -0.4, .6, 1.4), palidle 2.6s ease-in-out .55s infinite; }
@keyframes palidle { 50% { translate: 0 -10px; } }
@keyframes palhop { 40% { translate: 0 -60px; scale: 1.08 .92; } 70% { translate: 0 0; scale: .92 1.08; } }
.pal::after { content: ''; width: 150px; height: 18px; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); margin-top: -18px; order: 2; }
.pal-say { position: absolute; top: -18px; left: 50%; translate: -50% -100%; width: max-content; max-width: 240px; background: #fff; color: var(--ink); font: 700 15px/1.3 var(--pixel); padding: 8px 12px; box-shadow: 0 0 0 3px #000, 0 5px 0 #000; opacity: 0; scale: .6; transition: opacity .2s, scale .2s; }
.pal-say::after { content: ''; position: absolute; left: 50%; bottom: -11px; margin-left: -6px; border: 6px solid transparent; border-top-color: #000; }
.pal-say.on { opacity: 1; scale: 1; }
.pal-bar { display: flex; gap: 8px; align-items: center; order: 3; } .pal-tag { font: 700 13px var(--pixel); background: rgba(0, 0, 0, .7); color: var(--gold); padding: 3px 8px; }
.pal-dice { font: 700 13px var(--pixel); background: var(--lime); color: var(--ink); border: 0; padding: 4px 10px; cursor: pointer; box-shadow: 0 0 0 2px #000, 0 3px 0 #000; }
.pal.swap img { animation: palswap .28s steps(4) forwards; } @keyframes palswap { to { filter: blur(0) brightness(3); scale: .2; opacity: 0; } }
.pal-px { position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; animation: palpx .7s ease-out forwards; }
@keyframes palpx { from { transform: rotate(var(--a)) translateY(0); } to { transform: rotate(var(--a)) translateY(-120px); opacity: 0; } }
@media (max-width: 1000px) { .pal { display: none; } }
@media (max-width: 700px) { .hero .copy { padding: 18px; } }
.clip .bosskeep { position: absolute; right: 14px; bottom: 12px; width: 120px; image-rendering: pixelated; filter: drop-shadow(0 0 16px rgba(255, 106, 0, .8)) drop-shadow(0 6px 0 #000); animation: bob 3s ease-in-out infinite; }
.hero .copy h1.mega { font-size: clamp(48px, 7.4vw, 104px); }
.pal img { background: linear-gradient(160deg, #fff8e4, #f0e2bf); box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--gold), 0 0 0 12px #000, 0 18px 0 12px rgba(0, 0, 0, .35); filter: drop-shadow(0 0 40px rgba(255, 201, 60, .35)); }
.pal::after { display: none; }
/* ===================== v4: painted night sky behind every page (dimmed, fades to the page colour) ===================== */
body { background: var(--bg); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 13, 36, .55) 0%, rgba(18, 13, 36, .72) 45%, rgba(18, 13, 36, .9) 100%), url(/assets/site_bg.webp) center top / cover no-repeat; }
section.tint { background: rgba(24, 18, 48, .55); } section.dark { background: rgba(11, 8, 24, .6); }