:root {
  --ink: #f6f3ea;
  --muted: #9f9caf;
  --night: #0b0b12;
  --panel: #151420;
  --panel-2: #1d1a2c;
  --line: rgba(246, 243, 234, .13);
  --lime: #c9ff4a;
  --pink: #ff4fd8;
  --blue: #75a9ff;
  --orange: #ff9b58;
  --purple: #ac77ff;
  --red: #ff626f;
  --green: #69e29c;
  --pixel: "Press Start 2P", ui-monospace, monospace;
  --sans: "Space Grotesk", Inter, system-ui, sans-serif;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--night); font: 16px/1.55 var(--sans); }
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; border: 0; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }

.site-header { height: 76px; padding: 0 5vw; display: flex; align-items: center; gap: 34px; border-bottom: 1px solid var(--line); background: rgba(11, 11, 18, .92); position: sticky; z-index: 10; top: 0; backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 11px var(--pixel); letter-spacing: .08em; white-space: nowrap; }
.brand-mark { display: grid; width: 27px; height: 27px; place-items: center; color: var(--night); background: var(--lime); font: 15px var(--pixel); clip-path: polygon(0 0, 72% 0, 72% 24%, 100% 24%, 100% 100%, 72% 100%, 72% 76%, 28% 76%, 28% 100%, 0 100%); }
.desktop-nav { display: flex; align-items: center; gap: 25px; margin-right: auto; }
.desktop-nav a { color: var(--muted); font-size: 14px; transition: color .2s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--ink); }
.header-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 15px; color: var(--night); background: var(--lime); font-weight: 700; font-size: 13px; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.header-cta span { font-size: 15px; }
.menu-toggle { display: none; margin-left: auto; background: transparent; color: var(--ink); font-size: 23px; }

main { overflow: hidden; }
.hero, .section, .template-section, .how-section, .faq-section, .related-section, .generator-band { width: min(var(--max), calc(100% - 10vw)); margin-inline: auto; }
.section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; min-height: 710px; }
.hero { padding: 70px 0 80px; position: relative; }
.hero::before { content: ""; position: absolute; width: 500px; height: 380px; left: -260px; top: 100px; background: radial-gradient(circle, rgba(255, 79, 216, .2), transparent 67%); pointer-events: none; }
.hero-copy { position: relative; z-index: 1; }
.hero-kicker, .section-number, .content-label { display: inline-block; color: var(--lime); font: 10px var(--pixel); letter-spacing: .08em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { letter-spacing: 0; line-height: .98; }
h1 { font-size: clamp(54px, 7vw, 100px); margin: 22px 0 25px; font-weight: 700; }
h1 em, h2 em { color: var(--pink); font-style: normal; }
.hero-lede { max-width: 550px; color: #d3d0dc; font-size: 18px; line-height: 1.55; margin-bottom: 28px; }
.generator-form { padding: 17px; border: 1px solid rgba(246, 243, 234, .18); background: linear-gradient(145deg, rgba(30, 27, 45, .98), rgba(20, 18, 32, .98)); box-shadow: 11px 11px 0 rgba(201, 255, 74, .11); }
.generator-form label { display: block; margin: 0 0 12px 2px; color: var(--muted); font: 10px var(--pixel); letter-spacing: .08em; }
.generator-form textarea { display: block; width: 100%; min-height: 75px; padding: 0 2px; resize: vertical; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 18px; line-height: 1.45; }
.generator-form textarea::placeholder { color: #706c7d; }
.generator-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.prompt-note { color: var(--muted); font-size: 12px; }
.dot, .live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); margin-right: 7px; box-shadow: 0 0 11px var(--lime); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 19px; font-size: 13px; font-weight: 700; white-space: nowrap; clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translate(-2px, -2px); }
.button-primary { color: var(--night); background: var(--lime); }
.button-secondary { color: var(--ink); background: transparent; border: 1px solid rgba(246, 243, 234, .25); }
.button-secondary:hover { background: var(--ink); color: var(--night); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 22px; color: var(--muted); font-size: 12px; }
.hero-trust span { white-space: nowrap; }
.hero-trust span::first-letter { color: var(--lime); }

.hero-demo { padding: 17px; border: 1px solid var(--line); background: rgba(19, 17, 29, .8); box-shadow: 14px 14px 0 rgba(117, 169, 255, .11); transform: rotate(1deg); }
.demo-label, .score-row, .game-frame-footer, .demo-caption, .preview-top, .preview-bottom, .modal-top, .modal-footer { display: flex; align-items: center; justify-content: space-between; }
.demo-label { margin-bottom: 13px; color: var(--muted); font: 9px var(--pixel); letter-spacing: .08em; }
.hero-game-frame { border: 1px solid rgba(246, 243, 234, .18); background: #121223; }
.score-row { padding: 13px 14px; color: var(--lime); font: 8px var(--pixel); }
.hero-game-art { min-height: 390px; position: relative; overflow: hidden; background: radial-gradient(circle at 60% 28%, rgba(255, 79, 216, .38), transparent 20%), linear-gradient(180deg, #24205d 0%, #111133 67%, #131126 100%); }
.hero-game-art::before, .modal-sky::before { content: ""; position: absolute; inset: 0; opacity: .25; background: linear-gradient(transparent 95%, rgba(201,255,74,.32) 96%), linear-gradient(90deg, transparent 95%, rgba(201,255,74,.14) 96%); background-size: 24px 24px; transform: perspective(300px) rotateX(58deg) scale(1.7) translateY(52px); transform-origin: bottom; }
.pixel-sun { position: absolute; width: 94px; height: 94px; top: 72px; right: 55px; background: linear-gradient(180deg, var(--pink), #ff9663); border-radius: 50%; box-shadow: 0 0 28px rgba(255, 79, 216, .7); }
.pixel-player { position: absolute; width: 28px; height: 36px; left: 29%; bottom: 77px; background: var(--lime); box-shadow: 9px -9px 0 var(--lime), -9px 9px 0 rgba(201,255,74,.5); transform: skewY(-12deg); z-index: 2; }
.pixel-enemy { position: absolute; width: 24px; height: 24px; right: 25%; bottom: 128px; background: var(--pink); box-shadow: 9px 0 0 var(--pink), 0 9px 0 var(--pink), -9px 0 0 rgba(255,79,216,.4); z-index: 2; }
.pixel-star { position: absolute; color: var(--lime); font-size: 22px; text-shadow: 0 0 16px var(--lime); z-index: 2; }
.star-a { left: 49%; top: 29%; }.star-b { right: 18%; top: 49%; color: var(--blue); text-shadow: 0 0 16px var(--blue); }
.pixel-ground { position: absolute; height: 28px; bottom: 58px; left: 0; right: 0; background: repeating-linear-gradient(90deg, #29255d 0 24px, #383272 24px 46px); border-top: 2px solid var(--lime); z-index: 1; }
.game-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: rgba(246,243,234,.55); font: 8px var(--pixel); z-index: 2; }
.game-frame-footer { padding: 14px; color: var(--ink); font: 10px var(--pixel); }
.mini-play { width: 30px; height: 30px; color: var(--night); background: var(--lime); }
.demo-caption { gap: 8px; padding-top: 13px; color: var(--muted); font-size: 11px; }

.section { padding: 95px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 36px; }
.section-heading h2 { margin: 15px 0 0; font-size: clamp(37px, 5vw, 64px); }
.section-heading p { max-width: 280px; margin-bottom: 3px; color: var(--muted); font-size: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--lime); font-size: 13px; font-weight: 700; white-space: nowrap; }
.text-link:hover { color: var(--pink); }
.game-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.game-card { min-width: 0; }
.game-card-hit { display: block; width: 100%; padding: 0; text-align: left; background: transparent; }
.game-card-hit:hover .game-thumb { transform: translateY(-6px); border-color: var(--lime); }
.game-thumb { height: 220px; position: relative; overflow: hidden; border: 1px solid var(--line); transition: transform .25s ease, border-color .25s ease; background: radial-gradient(circle at 50% 32%, rgba(255,79,216,.35), transparent 21%), linear-gradient(155deg, #292451, #101020 69%); }
.game-thumb::before { content: ""; position: absolute; inset: 0; opacity: .23; background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(246,243,234,.18) 14px 15px), repeating-linear-gradient(90deg, transparent 0 13px, rgba(246,243,234,.11) 14px 15px); transform: perspective(180px) rotateX(57deg) scale(1.6) translateY(42px); transform-origin: bottom; }
.game-thumb-green { background: radial-gradient(circle at 67% 30%, rgba(105,226,156,.4), transparent 21%), linear-gradient(155deg, #1e4a41, #0e1617 69%); }.game-thumb-orange { background: radial-gradient(circle at 64% 26%, rgba(255,155,88,.45), transparent 24%), linear-gradient(155deg, #553431, #19151d 69%); }.game-thumb-blue { background: radial-gradient(circle at 58% 28%, rgba(117,169,255,.43), transparent 20%), linear-gradient(155deg, #243861, #101020 69%); }.game-thumb-red { background: radial-gradient(circle at 55% 24%, rgba(255,98,111,.5), transparent 18%), linear-gradient(155deg, #4b202d, #150f18 69%); }.game-thumb-lime { background: radial-gradient(circle at 55% 30%, rgba(201,255,74,.42), transparent 19%), linear-gradient(155deg, #354a2d, #101617 69%); }
.thumb-icon { position: absolute; top: 23%; left: 47%; color: var(--ink); font-size: 48px; text-shadow: 5px 5px 0 rgba(11,11,18,.4), 0 0 19px currentColor; z-index: 2; }.game-thumb-pink .thumb-icon { color: var(--pink); }.game-thumb-green .thumb-icon { color: var(--green); }.game-thumb-orange .thumb-icon { color: var(--orange); }.game-thumb-blue .thumb-icon { color: var(--blue); }.game-thumb-red .thumb-icon { color: var(--red); }.game-thumb-lime .thumb-icon { color: var(--lime); }
.thumb-orbit { position: absolute; width: 140px; height: 32px; left: 32%; top: 51%; border: 1px solid rgba(201,255,74,.45); border-radius: 50%; transform: rotate(-20deg); }.orbit-two { left: 38%; top: 46%; transform: rotate(18deg); border-color: rgba(255,79,216,.45); }
.thumb-floor { position: absolute; left: 8%; right: 8%; bottom: 21px; height: 23px; background: repeating-linear-gradient(90deg, #2c2859 0 17px, #403a74 17px 31px); border-top: 2px solid rgba(201,255,74,.75); }
.game-card-copy { display: flex; align-items: start; justify-content: space-between; gap: 10px; padding: 16px 0 5px; }.game-card h3 { margin: 6px 0 0; font-size: 20px; }.game-type, .play-count { color: var(--muted); font-size: 11px; }.play-count { padding-top: 6px; white-space: nowrap; }.game-card p { max-width: 260px; margin: 0 0 9px; color: var(--muted); font-size: 13px; }.play-link { color: var(--lime); font-size: 12px; font-weight: 700; }

.how-section { padding: 95px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.section-heading.compact { align-items: start; }.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }.step { min-height: 200px; padding: 27px; background: var(--night); }.step-index { color: var(--pink); font: 12px var(--pixel); }.step h3 { margin: 32px 0 8px; font-size: 20px; }.step p { max-width: 240px; color: var(--muted); font-size: 14px; }
.template-section { padding: 95px 0; }.template-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.template-card { display: block; border: 1px solid var(--line); background: var(--panel); transition: transform .2s ease, border-color .2s ease; }.template-card:hover { border-color: var(--lime); transform: translateY(-5px); }.template-art { height: 155px; position: relative; overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg, #33305d, #151421); }.template-art::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(201,255,74,.13) 13px 14px), repeating-linear-gradient(90deg, transparent 0 12px, rgba(201,255,74,.08) 13px 14px); transform: perspective(180px) rotateX(58deg) scale(1.7) translateY(35px); transform-origin: bottom; }.template-art span { position: relative; z-index: 1; color: var(--lime); font: 35px var(--pixel); text-shadow: 4px 4px 0 var(--night); }.template-art i, .template-art b { position: absolute; display: block; width: 42px; height: 42px; border: 2px solid var(--pink); transform: rotate(24deg); }.template-art i { left: 18%; top: 22%; }.template-art b { right: 16%; bottom: 20%; border-color: var(--blue); border-radius: 50%; }.art-pink { background: linear-gradient(145deg, #56245a, #171323); }.art-blue { background: linear-gradient(145deg, #243c67, #111424); }.art-orange { background: linear-gradient(145deg, #5b3a31, #1d1720); }.art-purple { background: linear-gradient(145deg, #49316a, #171323); }.art-green { background: linear-gradient(145deg, #214d4a, #111a1b); }.art-red { background: linear-gradient(145deg, #5b2c3c, #17121c); }.template-card-body { padding: 18px; }.template-card-body > span { color: var(--muted); font: 9px var(--pixel); }.template-card-body h3 { margin: 13px 0 8px; font-size: 20px; }.template-card-body p { min-height: 47px; color: var(--muted); font-size: 13px; }.template-card-body strong { color: var(--lime); font-size: 12px; }.rail-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; color: var(--muted); font-size: 12px; }
.generator-band { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7vw; padding: 75px 0 105px; border-top: 1px solid var(--line); }.generator-band h2 { margin: 16px 0; font-size: clamp(39px, 5vw, 66px); }.generator-band p { color: var(--muted); }.small-band { padding-bottom: 90px; }.small-band > .button { justify-self: end; }

.site-footer { padding: 55px 5vw 25px; border-top: 1px solid var(--line); background: #09090f; }.footer-top { width: min(var(--max), 100%); margin-inline: auto; display: flex; justify-content: space-between; gap: 50px; }.footer-brand { color: var(--ink); }.site-footer p { max-width: 220px; margin: 20px 0 0; color: var(--muted); font-size: 13px; }.footer-links { display: flex; gap: 75px; }.footer-links > div { display: flex; flex-direction: column; gap: 9px; min-width: 120px; }.footer-links strong { margin-bottom: 7px; color: var(--ink); font: 10px var(--pixel); }.footer-links a { color: var(--muted); font-size: 13px; }.footer-links a:hover { color: var(--lime); }.footer-bottom { width: min(var(--max), 100%); margin: 50px auto 0; padding-top: 18px; display: flex; justify-content: space-between; color: #646172; border-top: 1px solid var(--line); font-size: 11px; }

.template-hero { width: min(var(--max), calc(100% - 10vw)); margin-inline: auto; padding: 40px 0 80px; }.breadcrumbs { display: flex; gap: 9px; align-items: center; margin-bottom: 65px; color: var(--muted); font-size: 12px; }.breadcrumbs a:hover { color: var(--lime); }.template-hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 8vw; }.template-hero h1 { margin-top: 20px; }.template-actions { display: flex; flex-wrap: wrap; gap: 11px; }.template-preview { padding: 16px; border: 1px solid var(--line); background: var(--panel); box-shadow: 13px 13px 0 rgba(255,79,216,.1); transform: rotate(-1deg); }.preview-top, .preview-bottom { color: var(--muted); font: 8px var(--pixel); letter-spacing: .05em; }.large-preview { height: 360px; margin: 14px 0; }.large-preview > span { color: var(--lime); font: 52px var(--pixel); z-index: 1; text-shadow: 5px 5px 0 var(--night); }.preview-ui { position: absolute; left: 20px; right: 20px; bottom: 15px; z-index: 2; display: flex; justify-content: space-between; color: var(--ink); font: 8px var(--pixel); }.preview-bottom button { width: 30px; height: 30px; color: var(--night); background: var(--lime); }
.template-content { display: grid; grid-template-columns: 1.3fr .7fr; gap: 8vw; width: min(var(--max), calc(100% - 10vw)); padding: 90px 0; margin-inline: auto; border-top: 1px solid var(--line); }.content-main h2 { margin: 18px 0; font-size: clamp(39px, 5vw, 65px); }.content-main > p { max-width: 610px; color: var(--muted); }.content-main .generator-form { margin-top: 30px; max-width: 650px; }.prompt-examples { display: flex; flex-direction: column; gap: 8px; margin-top: 19px; }.prompt-examples > span { color: var(--muted); font: 9px var(--pixel); }.prompt-examples button { width: fit-content; padding: 0; color: var(--lime); background: transparent; text-align: left; font-size: 13px; }.prompt-examples button:hover { color: var(--pink); }.template-aside { align-self: start; border-top: 1px solid var(--line); }.aside-stat { display: flex; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }.aside-stat strong { color: var(--pink); font: 15px var(--pixel); }.aside-stat span { color: var(--muted); font-size: 13px; }.faq-section, .related-section { padding: 90px 0; border-top: 1px solid var(--line); }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--lime); font-size: 21px; font-weight: 400; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list p { max-width: 750px; padding: 0 40px 22px 0; margin-bottom: 0; color: var(--muted); font-size: 14px; }.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.legal-hero { width: min(920px, calc(100% - 10vw)); min-height: 720px; margin-inline: auto; padding: 45px 0 100px; }.legal-hero h1 { margin: 22px 0 32px; font-size: clamp(55px, 8vw, 98px); }.legal-lede { max-width: 700px; color: #d3d0dc; font-size: 21px; line-height: 1.5; }.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 44px 0 22px; }.price-card { min-height: 320px; padding: 28px; border: 1px solid var(--line); background: var(--panel); }.price-card.featured { border-color: var(--lime); box-shadow: 10px 10px 0 rgba(201,255,74,.1); }.price-card h2 { margin: 25px 0 13px; font-size: 31px; }.price-card > strong { display: block; color: var(--lime); font: 18px var(--pixel); }.price-card p { min-height: 50px; color: var(--muted); }.fine-print { color: var(--muted); font-size: 12px; }.legal-copy { max-width: 700px; margin-top: 48px; }.legal-copy h2 { margin: 34px 0 10px; font-size: 28px; }.legal-copy p { color: var(--muted); }.empty-page { width: min(850px, calc(100% - 10vw)); min-height: 700px; margin-inline: auto; padding: 120px 0; }.empty-page h1 { margin: 22px 0; }.empty-page p { color: var(--muted); font-size: 18px; }
.public-game-page { width: min(var(--max), calc(100% - 10vw)); margin: 0 auto; padding: 42px 0 90px; }.public-game-page .breadcrumbs { margin-bottom: 50px; }.public-game-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }.public-game-head h1 { margin: 18px 0 10px; font-size: clamp(48px, 7vw, 88px); }.public-game-head p { max-width: 520px; color: var(--muted); font-size: 17px; }.public-game-frame { padding: 18px; border: 1px solid var(--line); background: var(--panel); box-shadow: 12px 12px 0 rgba(255,79,216,.1); }.public-game-frame .game-iframe { min-height: 500px; height: min(70vh, 650px); }.public-game-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; color: var(--muted); font-size: 12px; }.public-game-actions, .modal-actions { display: flex; align-items: center; gap: 10px; }

.generation-panel { margin-top: 14px; padding: 16px; border: 1px solid rgba(201,255,74,.35); background: rgba(201,255,74,.06); }.generation-top { display: flex; justify-content: space-between; gap: 15px; color: var(--lime); font: 9px var(--pixel); }.generation-top strong { color: var(--muted); font-weight: 400; }.progress-track { height: 8px; margin: 18px 0 13px; background: rgba(246,243,234,.1); }.progress-track span { display: block; width: 0; height: 100%; background: var(--lime); transition: width .45s ease; }.generation-steps { display: flex; justify-content: space-between; gap: 10px; color: #5d5969; font-size: 11px; }.generation-steps span.active { color: var(--ink); }.generation-panel.complete { border-color: var(--pink); background: rgba(255,79,216,.07); }.generation-panel.complete .progress-track span { background: var(--pink); }.generated-result-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 14px; padding: 20px; border: 1px solid var(--pink); background: rgba(255,79,216,.08); }.generated-result-card h3 { margin: 12px 0 4px; font-size: 20px; }.generated-result-card p { margin-bottom: 0; color: var(--muted); font-size: 13px; }.spinner { width: 12px; height: 12px; border: 2px solid rgba(11,11,18,.35); border-top-color: var(--night); border-radius: 50%; animation: spin .8s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.game-modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(5,5,9,.83); opacity: 0; transition: opacity .2s ease; }.game-modal.open { opacity: 1; }.game-modal-shell { width: min(720px, 100%); position: relative; padding: 18px; border: 1px solid var(--line); background: var(--panel); box-shadow: 14px 14px 0 rgba(201,255,74,.12); transform: translateY(12px); transition: transform .25s ease; }.game-modal.open .game-modal-shell { transform: translateY(0); }.modal-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 30px; height: 30px; color: var(--ink); background: rgba(11,11,18,.55); font-size: 24px; line-height: 1; }.modal-top { padding: 0 0 14px; color: var(--muted); font: 8px var(--pixel); }.game-iframe { display: block; width: 100%; height: min(62vh, 500px); min-height: 380px; border: 1px solid var(--line); background: #171737; }.modal-footer { padding-top: 13px; color: var(--muted); font-size: 11px; }.share-game { color: var(--lime); background: transparent; font-size: 11px; }.toast { position: fixed; z-index: 70; bottom: 24px; left: 50%; max-width: min(420px, calc(100% - 34px)); padding: 12px 15px; border: 1px solid var(--lime); color: var(--night); background: var(--lime); font-size: 13px; opacity: 0; transform: translate(-50%, 12px); transition: opacity .25s ease, transform .25s ease; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 880px) { .site-header { gap: 18px; padding-inline: 6vw; }.desktop-nav { gap: 15px; }.section-grid, .template-hero-grid, .generator-band, .template-content { grid-template-columns: 1fr; }.section-grid { min-height: 0; gap: 60px; }.hero { padding-top: 52px; }.hero-demo { max-width: 620px; width: 100%; justify-self: center; }.game-wall, .template-rail, .related-grid { grid-template-columns: repeat(2, 1fr); }.template-content { gap: 45px; }.template-aside { max-width: 530px; width: 100%; }.small-band > .button { justify-self: start; }.footer-top { flex-direction: column; }.footer-links { gap: 35px; } }
@media (max-width: 620px) { .site-header { height: 66px; }.desktop-nav { display: none; position: absolute; left: 5vw; right: 5vw; top: 74px; flex-direction: column; align-items: stretch; gap: 0; padding: 10px; border: 1px solid var(--line); background: var(--panel); }.desktop-nav.mobile-open { display: flex; }.desktop-nav a { padding: 13px 10px; border-bottom: 1px solid var(--line); }.desktop-nav a:last-child { border: 0; }.header-cta { margin-left: auto; padding: 9px 11px; font-size: 11px; }.menu-toggle { display: block; }.brand { font-size: 10px; }.brand-mark { width: 24px; height: 24px; font-size: 12px; }.hero, .section, .template-section, .how-section, .faq-section, .related-section, .generator-band, .template-hero, .template-content, .legal-hero, .empty-page, .public-game-page { width: min(100% - 10vw, 600px); }.hero { padding: 45px 0 60px; }.hero-kicker, .section-number { font-size: 8px; }.hero-lede { font-size: 16px; }.generator-form { padding: 14px; box-shadow: 7px 7px 0 rgba(201,255,74,.11); }.generator-form-footer { align-items: end; flex-direction: column; }.generator-form-footer .button { width: 100%; }.hero-trust { gap: 9px 15px; font-size: 11px; }.hero-game-art { min-height: 305px; }.pixel-sun { width: 72px; height: 72px; top: 55px; right: 33px; }.section, .how-section, .template-section, .faq-section, .related-section { padding: 68px 0; }.section-heading { align-items: start; flex-direction: column; gap: 15px; margin-bottom: 25px; }.section-heading h2 { font-size: 42px; }.game-wall, .template-rail, .related-grid, .steps, .pricing-grid { grid-template-columns: 1fr; }.game-thumb { height: 190px; }.template-card-body p { min-height: auto; }.template-art { height: 135px; }.rail-footer { align-items: start; gap: 15px; flex-direction: column; }.generator-band { padding: 68px 0 80px; gap: 28px; }.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }.footer-bottom { margin-top: 36px; gap: 10px; flex-direction: column; }.breadcrumbs { margin-bottom: 42px; overflow: auto; white-space: nowrap; }.template-hero { padding-top: 28px; }.template-hero h1 { font-size: 56px; }.template-preview { box-shadow: 7px 7px 0 rgba(255,79,216,.1); }.large-preview { height: 260px; }.large-preview > span { font-size: 33px; }.template-actions .button { width: 100%; }.template-content { padding: 68px 0; }.content-main h2 { font-size: 42px; }.aside-stat { padding: 15px 0; }.faq-list summary { font-size: 15px; }.legal-hero { padding-top: 30px; }.legal-hero h1 { font-size: 60px; }.legal-lede { font-size: 18px; }.price-card { min-height: auto; }.public-game-head { align-items: start; flex-direction: column; }.public-game-head h1 { font-size: 55px; }.public-game-head .button { width: 100%; }.public-game-frame { padding: 10px; }.public-game-frame .game-iframe { min-height: 420px; height: 70vh; }.public-game-footer { align-items: start; flex-direction: column; }.public-game-actions, .modal-actions { width: 100%; flex-direction: column; align-items: stretch; }.public-game-actions .button, .modal-actions .button, .modal-actions .share-game { width: 100%; }.game-modal { padding: 10px; }.game-modal-shell { padding: 12px; }.game-iframe { min-height: 360px; height: 68vh; }.modal-footer { align-items: start; gap: 8px; flex-direction: column; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.template-live-example{display:block;width:100%;height:580px;border:0;background:#101020}.template-preview{min-width:0}.template-hero h1{overflow-wrap:anywhere}.template-actions{flex-wrap:wrap}.game-modal-shell{max-height:96dvh;overflow:auto}.content-main,.template-hero-grid>div{min-width:0}
.generator-status,.generation-note{font-size:13px;line-height:1.5;color:var(--muted);margin:14px 0 0}.generation-detail{font-size:15px;line-height:1.5;margin:10px 0}.generation-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}.button:disabled{opacity:.55;cursor:not-allowed}.generation-panel.error{border-color:#ff9b9b}.share-link-field{display:block;width:100%;margin-top:12px;padding:12px;background:var(--night);color:var(--ink);border:1px solid var(--lime);font-size:14px}.game-expanded{position:fixed!important;inset:0!important;z-index:100!important;background:var(--night);padding:14px!important;overflow:auto;max-height:100dvh!important}.game-expanded .game-iframe{height:calc(100dvh - 180px);min-height:200px}.generation-top{flex-wrap:wrap}.public-game-head h1{overflow-wrap:anywhere}
@media(max-width:620px){.template-live-example{height:600px}.template-hero h1{font-size:clamp(36px,10vw,56px)}}
.game-modal{align-items:start;overflow:auto}.game-modal-shell{max-height:calc(100dvh - 40px)}.game-modal.open .game-modal-shell{transform:none}
@media(max-width:620px){.game-modal-shell{max-height:calc(100dvh - 20px)}}
.game-expanded .breadcrumbs,.game-expanded .public-game-head{display:none}.game-expanded.public-game-page{width:100%;margin:0}.game-expanded .public-game-frame{padding:0;box-shadow:none}.game-expanded.public-game-page .game-iframe{height:calc(100dvh - 185px);min-height:200px}.game-expanded .public-game-footer{margin-top:10px}
.generation-panel.error .progress-track span{background:#ff9b9b}

/* Phase 3: usable controls, recognizable examples, and shared membership. */
[hidden]{display:none!important}
section[id],#main-content{scroll-margin-top:95px}
:focus-visible{outline:2px solid var(--lime);outline-offset:5px}
.generator-form:focus-within{border-color:var(--lime)}
.skip-link{position:fixed;top:8px;left:12px;z-index:120;padding:12px 18px;background:var(--lime);color:var(--night);transform:translateY(-180%)}
.skip-link:focus{transform:none}
.hero-game-art{display:block;width:100%;border:0;text-align:left}
.hero-game-art:hover .game-hint{color:var(--lime)}
.hero-play-link{display:inline-block;margin-top:19px;color:var(--lime);font-size:14px;font-weight:600;min-height:30px}
.idea-chips{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:24px;font-size:12px;color:var(--muted)}
.idea-chips button{min-height:36px;border:1px solid var(--line);padding:7px 11px;background:var(--panel);color:var(--ink);font-size:12px}
.idea-chips button:hover{border-color:var(--pink)}
.game-thumb::before,.template-art::before{display:none}
.game-thumb img,.template-art img{display:block;width:100%;height:100%;object-fit:cover}
.game-thumb{height:auto;aspect-ratio:400/220}
.template-art{height:auto;aspect-ratio:400/220}
.game-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 26px}
.game-filters button{min-height:44px;padding:9px 18px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13px}
.game-filters button[aria-pressed=true]{color:var(--night);background:var(--lime);border-color:var(--lime);font-weight:700}
.filter-count{margin-left:auto;color:var(--muted);font-size:12px}
.section-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:40px;padding:26px 0;border-top:1px solid var(--line)}
.section-cta p{margin:0;color:var(--muted)}
.membership-card{display:grid;grid-template-columns:1fr 1fr;gap:45px;margin:45px 0 25px;padding:38px;border:1px solid var(--lime);background:linear-gradient(130deg,#242333,#14131f);box-shadow:10px 10px 0 #c9ff4a12}
.membership-card h2{font-size:48px;margin:25px 0 20px}.membership-card p{color:var(--muted)}
.membership-details{align-self:center}.membership-details ul{list-style:none;padding:0;margin:0 0 26px}.membership-details li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}.membership-details li::before{content:'✓';margin-right:10px;color:var(--lime)}
.membership-details .button{width:100%}.membership-details .fine-print{margin-top:12px}
.notice-card{padding:24px;margin:35px 0;background:var(--panel);border-left:3px solid var(--pink)}.notice-card p{margin:10px 0 0;color:var(--muted);font-size:15px}
.legal-copy a:not(.button){color:var(--lime);text-decoration:underline;text-underline-offset:3px}.legal-copy h2{line-height:1.2}
.noscript-note{max-width:700px;margin:30px auto;padding:20px;color:var(--muted)}
.has-game-modal{overflow:hidden}
dialog.game-modal{width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border:0;color:var(--ink);justify-items:center}
dialog.game-modal::backdrop{background:#050509e6}
dialog.game-modal:not([open]){display:none}
.game-modal-shell{width:min(560px,100%)}
.modal-top{font-size:8px;align-items:start;gap:12px;padding-bottom:14px}.modal-top h2{font-family:var(--sans);font-size:22px;line-height:1.15;letter-spacing:-.03em;color:var(--ink);margin:10px 0 0}.modal-close{position:static;flex-shrink:0;width:44px;height:44px;line-height:44px;min-height:44px;background:#ffffff0d}
.modal-footer{align-items:start;gap:14px;flex-direction:column}.modal-actions{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.modal-actions .button{flex:1;padding-inline:10px;font-size:12px;min-width:100px}
.game-modal-shell.game-expanded{width:100%!important;max-height:100dvh!important;height:100dvh}.game-modal-shell.game-expanded .game-iframe{height:calc(100dvh - 200px);min-height:200px}
.mini-play,.preview-bottom button{min-width:44px;min-height:44px}.menu-toggle{min-width:44px;min-height:44px;margin-right:-10px}
.public-share-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}.public-game-head{align-items:center}.public-game-head h1{font-size:clamp(32px,5vw,62px);line-height:1.08}.public-game-head>div:first-child{min-width:0}.public-game-page .breadcrumbs{margin-bottom:25px}.public-game-actions{flex-wrap:wrap}.public-game-actions .button{white-space:normal;text-align:center}
@media(max-width:880px){.desktop-nav{gap:12px}.desktop-nav a{font-size:12px}.membership-card{gap:25px;padding:28px}.public-game-head{align-items:start;flex-direction:column}}
@media(max-width:620px){
  .membership-card{grid-template-columns:1fr;padding:23px;gap:12px}.membership-card h2{font-size:42px}.legal-hero h1{font-size:clamp(38px,10vw,58px);line-height:1.05;overflow-wrap:anywhere}
  .section-cta{align-items:start;flex-direction:column}.section-cta .button{width:100%}.game-filters{gap:7px}.game-filters button{padding-inline:12px}.filter-count{flex-basis:100%;margin:2px 0 0}
  .public-game-page{padding-top:25px}.public-game-head{gap:18px;margin-bottom:22px}.public-game-head h1{font-size:34px}.public-game-head p{font-size:15px;margin-bottom:0}.public-share-actions{width:100%}.public-share-actions .button{flex:1;width:auto;font-size:12px;padding:0 12px}
  .public-game-page:not(.game-expanded) .public-game-frame{margin-inline:-5vw;padding:0;box-shadow:none}
  .public-game-actions{flex-direction:row}.public-game-actions .button{flex:1;width:auto;padding-inline:10px;font-size:12px}.public-game-actions a{flex-basis:100%!important}.public-game-frame .game-iframe{height:70dvh;min-height:380px}
  .modal-actions{flex-direction:row}.modal-actions .button{width:auto;min-width:85px;padding:0 8px}.game-iframe{min-height:260px;height:calc(100dvh - 210px)}.modal-top h2{font-size:20px}.game-modal-shell{padding:12px}.template-preview{transform:none}
  .footer-links{gap:25px 12px}.footer-links>div{min-width:0}.footer-links strong{font-size:9px}.header-cta{font-size:10px;padding-inline:9px}.site-header{gap:10px;padding-inline:5vw}
}

/* Benchmark-led creator and discovery layout. */
.creator-hero { width:min(var(--max), calc(100% - 10vw)); min-height:610px; margin-inline:auto; padding:76px 0 72px; display:grid; grid-template-columns:minmax(0, .96fr) minmax(360px, .84fr); gap:clamp(40px, 7vw, 92px); align-items:center; }
.creator-intro { min-width:0; }
.creator-intro h1 { max-width:700px; margin:0 0 22px; font-size:clamp(52px, 6.2vw, 86px); }
.creator-intro .hero-lede { margin-bottom:25px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 20px; }
.creator-hero .generator-form { max-width:650px; box-shadow:none; }
.creator-hero .idea-chips { margin-top:15px; }
.featured-play { min-width:0; border:1px solid var(--line); background:#11111b; box-shadow:12px 12px 0 rgba(117,169,255,.12); }
.featured-play-top, .featured-play-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; color:var(--muted); font:8px var(--pixel); letter-spacing:.05em; }
.featured-play-hit { display:block; width:100%; position:relative; padding:0; overflow:hidden; background:#141528; text-align:left; }
.featured-play-hit img { display:block; width:100%; aspect-ratio:400/220; object-fit:cover; transition:transform .3s ease; }
.featured-play-hit:hover img, .template-preview-hit:hover img { transform:scale(1.035); }
.featured-play-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:4px; padding:18px; background:linear-gradient(180deg,transparent 33%,rgba(7,7,12,.9) 100%); }
.featured-play-overlay strong { font-size:28px; line-height:1; }
.featured-play-overlay small { color:#ded9eb; font-size:13px; }
.featured-play-overlay b { display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:10px 12px; color:var(--night); background:var(--lime); font-size:12px; }
.featured-play-meta { font-family:var(--sans); font-size:12px; letter-spacing:0; }
.featured-play-meta a { color:var(--lime); font-weight:700; }
.intent-filters { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:-6px 0 28px; }
.intent-filters button { min-height:42px; padding:8px 14px; border:1px solid var(--line); color:var(--muted); background:transparent; font-size:13px; transition:border-color .2s ease, color .2s ease, background .2s ease; }
.intent-filters button:hover { border-color:var(--lime); color:var(--ink); }
.intent-filters button[aria-pressed=true] { color:var(--night); background:var(--lime); border-color:var(--lime); font-weight:700; }
.intent-filters .filter-count { margin-left:auto; }
.play-section .section-heading p { max-width:360px; }
.play-section .game-wall { grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.template-preview-static { padding:12px; transform:none; box-shadow:12px 12px 0 rgba(255,79,216,.1); }
.template-preview-hit { display:block; width:100%; position:relative; overflow:hidden; margin:12px 0; padding:0; border:1px solid var(--line); background:#121223; text-align:left; }
.template-preview-hit img { display:block; width:100%; aspect-ratio:400/220; object-fit:cover; transition:transform .3s ease; }
.template-preview-hit span { position:absolute; left:13px; bottom:12px; display:inline-flex; gap:8px; align-items:center; padding:10px 12px; color:var(--night); background:var(--lime); font-weight:700; font-size:12px; }
.preview-bottom a { color:var(--lime); }
.template-brief, .template-play-guide, .template-creator { width:min(var(--max), calc(100% - 10vw)); margin-inline:auto; }
.template-brief { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(280px, .85fr); gap:clamp(36px,8vw,110px); padding:88px 0; border-top:1px solid var(--line); }
.template-brief h2, .template-play-guide h2, .template-creator h2 { margin:16px 0 20px; font-size:clamp(38px, 5vw, 64px); }
.template-brief > div > p { max-width:640px; margin:0; color:var(--muted); font-size:17px; }
.capability-list { align-self:start; border-top:1px solid var(--line); }
.capability-list > span { display:block; padding:14px 0; color:var(--muted); font:9px var(--pixel); }
.capability-list > div { display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; padding:16px 0; border-top:1px solid var(--line); }
.capability-list b { color:var(--pink); font:11px var(--pixel); }
.capability-list p { margin:0; color:#dad6e3; font-size:14px; }
.template-play-guide { padding:88px 0; border-top:1px solid var(--line); }
.play-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding:0; margin:0; list-style:none; border:1px solid var(--line); background:var(--line); }
.play-steps li { min-height:225px; padding:28px; background:var(--night); }
.play-steps li > span { color:var(--pink); font:12px var(--pixel); }
.play-steps h3 { margin:33px 0 8px; font-size:20px; }
.play-steps p { margin:0; color:var(--muted); font-size:14px; }
.template-creator { display:grid; grid-template-columns:minmax(0,1fr) minmax(310px,.85fr); gap:clamp(36px, 8vw, 110px); align-items:start; padding:88px 0; border-top:1px solid var(--line); }
.template-creator-copy > p { max-width:590px; color:var(--muted); }
.template-creator .prompt-examples { margin-top:28px; }
.template-creator .prompt-examples button { max-width:560px; }
.template-creator-form .generator-form { margin:0; box-shadow:none; }
@media(max-width:880px) {
  .creator-hero { min-height:0; grid-template-columns:1fr; gap:42px; padding-top:60px; }
  .featured-play { width:min(620px,100%); }
  .template-brief, .template-creator { grid-template-columns:1fr; }
  .play-section .game-wall { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:620px) {
  .creator-hero, .template-brief, .template-play-guide, .template-creator { width:min(100% - 10vw,600px); }
  .creator-hero { display:flex; flex-direction:column; align-items:stretch; padding:37px 0 55px; gap:18px; }
  .creator-intro { display:contents; }
  .creator-intro h1 { order:1; }
  .creator-intro .hero-lede { order:2; }
  .hero-actions { order:3; }
  .featured-play { order:4; }
  .remix-hero-art { order:4; }
  .creator-hero .generator-form { order:5; }
  .creator-hero .idea-chips { order:6; }
  .creator-hero .hero-trust { order:7; }
  .creator-intro h1 { margin-bottom:16px; font-size:clamp(42px,13vw,54px); line-height:1.02; }
  .creator-intro .hero-lede { margin-bottom:19px; font-size:16px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero-actions .button { width:100%; }
  .featured-play { box-shadow:7px 7px 0 rgba(117,169,255,.12); }
  .featured-play-top { font-size:7px; padding:11px; }
  .featured-play-meta { align-items:flex-start; flex-direction:column; gap:6px; padding:11px; }
  .featured-play-overlay strong { font-size:24px; }
  .intent-filters { gap:7px; margin-bottom:22px; }
  .intent-filters button { min-height:38px; padding:7px 10px; font-size:12px; }
  .intent-filters .filter-count { flex-basis:100%; margin:4px 0 0; }
  .play-section .game-wall { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  .game-card-copy { padding-top:11px; }
  .game-card h3 { font-size:17px; }
  .game-card p { display:none; }
  .play-count { display:none; }
  .game-thumb { aspect-ratio:1/1; }
  .template-brief, .template-play-guide, .template-creator { padding:66px 0; }
  .template-brief h2, .template-play-guide h2, .template-creator h2 { font-size:40px; }
  .template-brief > div > p { font-size:16px; }
  .play-steps { grid-template-columns:1fr; }
  .play-steps li { min-height:auto; padding:23px; }
  .play-steps h3 { margin-top:22px; }
  .template-creator { gap:35px; }
}

/* A working classic is the starting point; the player's changes take the lead. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.remix-hero { min-height:570px; padding-block:70px; }
.remix-hero .creator-intro > .section-number { display:block; margin-bottom:23px; font-size:8px; line-height:1.8; }
.remix-hero .hero-trust { margin:25px 0 0; gap:12px 17px; }
.remix-hero-art { border:1px solid var(--line); background:#141220; transform:rotate(1.5deg); box-shadow:13px 13px 0 #262139; }
.hero-inline-game { transform:none; }
.hero-inline-game iframe { display:block; width:100%; height:360px; border:0; background:#10101a; }
.hero-inline-game-footer { display:flex; justify-content:space-between; gap:12px; padding:14px 17px; color:var(--muted); font-size:12px; }
.hero-inline-game-footer a { color:var(--lime); font-weight:700; }
.hero-inline-game .remix-art-stage { display:none; }
.hero-inline-game .remix-art-footer { display:none; }
.remix-art-caption { display:flex; justify-content:space-between; gap:15px; padding:17px; border-bottom:1px solid var(--line); color:var(--muted); font:7px/1.8 var(--pixel); }
.remix-art-caption span:last-child { color:var(--pink); white-space:nowrap; }
.remix-art-stage { position:relative; min-height:340px; padding:28px; overflow:hidden; background:radial-gradient(ellipse at 90% 35%,rgba(255,79,216,.12),transparent 70%); }
.remix-art-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:66%; padding:10px; border:1px solid var(--line); background:#0e0d17; transform:rotate(-7deg); }
.remix-art-grid span,.remix-card-merge span { display:grid; place-items:center; aspect-ratio:1; color:#eee3ff; background:#342a4a; font-weight:700; font-size:23px; }
.remix-art-grid span:nth-child(3n),.remix-card-merge span:nth-child(3n) { background:#6541a0; }
.remix-art-grid span:nth-child(7),.remix-card-merge span:nth-child(7) { background:var(--pink); color:#210d29; }
.remix-art-grid span:nth-child(8),.remix-card-merge span:nth-child(8) { background:var(--lime); color:#152306; }
.remix-avatar-sticker { position:absolute; right:24px; top:66px; display:flex; flex-direction:column; align-items:center; gap:12px; width:125px; padding:17px 10px; color:var(--night); background:var(--lime); transform:rotate(9deg); box-shadow:7px 7px 0 #0b0b12; }
.remix-pixel-face { display:grid; place-items:center; width:64px; height:64px; background:#151323; color:var(--pink); font:32px var(--pixel); }
.remix-avatar-sticker strong { text-align:center; font:9px/1.8 var(--pixel); }
.remix-art-note { position:absolute; right:26px; bottom:20px; text-align:right; color:var(--muted); font-size:12px; }
.remix-art-note strong { color:var(--ink); font-size:18px; }
.remix-art-footer { display:flex; justify-content:space-between; gap:12px; padding:18px; border-top:1px solid var(--line); font-size:11px; }
.remix-art-footer b { color:var(--pink); }
.remix-library { padding-block:82px; border-top:1px solid var(--line); scroll-margin-top:95px; }
.classic-player-section { width:min(var(--max),calc(100% - 10vw)); margin:0 auto; padding:72px 0 82px; border-top:1px solid var(--line); scroll-margin-top:95px; }
.classic-player-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr); gap:26px; align-items:start; }
.classic-player-frame { border:1px solid var(--line); background:var(--panel); padding:10px; box-shadow:10px 10px 0 rgba(117,169,255,.1); }
.classic-player-top { display:flex; justify-content:space-between; gap:12px; padding:8px 5px 12px; color:var(--muted); font:8px var(--pixel); }
.classic-player-top span:first-child { color:var(--lime); }
.classic-player-frame iframe { display:block; width:100%; height:590px; border:0; background:#10101a; }
.classic-player-side { min-width:0; }
.classic-base-switcher { display:grid; gap:8px; }
.classic-base-switcher button { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:55px; padding:12px 14px; border:1px solid var(--line); background:var(--panel); color:var(--muted); text-align:left; }
.classic-base-switcher button b { color:var(--ink); font-size:12px; }
.classic-base-switcher button span { font-size:12px; }
.classic-base-switcher button[aria-pressed=true] { border-color:var(--lime); background:rgba(201,255,74,.08); color:var(--ink); }
.classic-base-switcher button[aria-pressed=true] b { color:var(--lime); }
.classic-player-note { margin:22px 0; color:var(--muted); font-size:14px; line-height:1.65; }
.classic-player-side > .button { width:100%; }
.remix-library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.remix-loading { padding:24px; color:var(--muted); border:1px solid var(--line); grid-column:1/-1; }
.remix-base-card { min-width:0; display:grid; grid-template-columns:1fr; grid-template-rows:220px 1fr; background:var(--panel); border:1px solid var(--line); }
.remix-card-art { min-height:220px; overflow:hidden; }
.remix-card-merge { display:grid; grid-template-columns:repeat(3,56px); justify-content:center; align-content:center; gap:7px; padding:15px; background:linear-gradient(155deg,#29203e,#12111d); }
.remix-card-merge span { font-size:18px; }
.remix-card-breakout { position:relative; padding:43px 18px; background:linear-gradient(145deg,#36243b,#161023); }
.remix-bricks { display:grid; grid-template-columns:repeat(6,1fr); gap:5px; }
.remix-bricks i { height:12px; background:#ff7089; box-shadow:inset 0 -3px 0 #b24167; }
.remix-bricks i:nth-child(n+7) { background:#ffb06e; box-shadow:inset 0 -3px 0 #b46a40; }
.remix-bricks i:nth-child(n+13) { background:var(--pink); box-shadow:inset 0 -3px 0 #aa309a; }
.remix-ball { position:absolute; top:57%; left:47%; width:11px; height:11px; background:white; box-shadow:-9px 11px 0 #ffffff30,-18px 22px 0 #ffffff12; }
.remix-paddle { position:absolute; left:33%; right:28%; bottom:38px; height:12px; background:var(--lime); box-shadow:0 4px 0 #63842b; }
.remix-card-snake { position:relative; background-color:#10251e; background-image:linear-gradient(#c9ff4a08 1px,transparent 1px),linear-gradient(90deg,#c9ff4a08 1px,transparent 1px); background-size:22px 22px; }
.remix-snake-body { display:grid; grid-template-columns:repeat(4,22px); grid-template-rows:repeat(3,22px); gap:3px; position:absolute; top:36%; left:27%; transform:rotate(-5deg); }
.remix-snake-body i { background:var(--lime); box-shadow:inset -4px -4px 0 #76a841; }
.remix-snake-body i:first-child { grid-area:1/1; }.remix-snake-body i:nth-child(2) { grid-area:2/1; }.remix-snake-body i:nth-child(3) { grid-area:3/1; }.remix-snake-body i:nth-child(4) { grid-area:3/2; }.remix-snake-body i:nth-child(5) { grid-area:3/3; }.remix-snake-body i:nth-child(6) { grid-area:3/4; position:relative; }
.remix-snake-body i:nth-child(6)::after { content:''; position:absolute; top:4px; right:5px; width:4px; height:4px; background:#10251e; box-shadow:0 10px 0 #10251e; }
.remix-snake-food { position:absolute; top:23%; right:23%; width:15px; height:15px; background:var(--pink); box-shadow:4px 4px 0 #902c7c; }
.remix-snake-label { position:absolute; bottom:21px; right:22px; font:7px var(--pixel); color:#72a78f; }
.remix-base-card-copy { display:flex; flex-direction:column; align-items:flex-start; padding:25px 20px; }
.remix-card-eyebrow { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:25px; font:7px/1.6 var(--pixel); color:var(--muted); }
.remix-card-eyebrow span:last-child { color:var(--lime); }
.remix-base-card h3 { font-size:25px; line-height:1.1; margin-bottom:12px; }
.remix-base-card p { color:var(--muted); font-size:13px; margin-bottom:20px; }
.remix-base-card .button { margin-top:auto; padding-inline:13px; }
.remix-card-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; }
.remix-card-actions .button { margin:0; }
.remix-advanced { margin-block:25px 85px; }
.remix-advanced details { border:1px solid var(--line); padding:25px; }
.remix-advanced summary { display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; }
.remix-advanced summary::marker { content:''; }
.remix-advanced summary::-webkit-details-marker { display:none; }
.remix-advanced summary strong { display:block; margin-top:12px; font-size:20px; line-height:1.4; }
.remix-advanced summary > span:last-child { color:var(--pink); font-size:26px; }
.remix-advanced-content { max-width:740px; padding-top:25px; }
.remix-advanced-content > p { color:var(--muted); }
.remix-advanced .generator-form { box-shadow:none; }
.remix-studio { width:min(var(--max),calc(100% - 10vw)); margin:0 auto; padding:33px 0 85px; }
.remix-studio .breadcrumbs { margin-bottom:15px; }
.remix-studio-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding:30px 0 25px; }
.remix-studio-heading h1 { font-size:clamp(42px,5vw,68px); margin:17px 0 0; line-height:1.06; }
.remix-studio-heading > p { color:var(--muted); max-width:330px; font-size:17px; margin-bottom:4px; }
.remix-workflow { display:flex; gap:35px; padding:20px 0; border-block:1px solid var(--line); color:var(--muted); font-size:13px; }
.remix-workflow b { font:8px var(--pixel); color:var(--pink); margin-right:9px; }
.remix-section-links { display:none; }
#remix-editor,#remix-playtest { scroll-margin-top:90px; }
.remix-status { min-height:26px; margin:18px 0 25px; color:var(--muted); font-size:14px; }
.remix-status[data-state=error] { color:#ff9da5; }
.remix-status[data-state=success] { color:var(--lime); }
.remix-status[data-state=working] { color:var(--blue); }
.remix-source-notice { border-left:2px solid var(--orange); padding:15px 18px; margin:20px 0; background:rgba(255,155,88,.06); color:#e4c6b5; font-size:13px; line-height:1.7; }
.remix-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,6vw,80px); align-items:start; }
.remix-controls { min-width:0; border:1px solid var(--line); background:var(--panel); }
.remix-controls fieldset { min-width:0; border:0; margin:0; padding:0; }
.remix-controls fieldset:disabled { opacity:.66; }
.remix-rules-section { padding-top:22px; margin-top:24px; border-top:1px solid var(--line); }
.remix-rule-field { margin-top:18px; }
.remix-rule-field label { margin-top:0!important; }
.remix-draft-status,.remix-playtest-status { color:var(--muted); font-size:12px; line-height:1.6; }
.remix-history-panel { margin-top:20px; border:1px solid var(--line); background:var(--panel); }
.remix-history-panel summary { display:flex; justify-content:space-between; gap:12px; padding:16px 18px; cursor:pointer; color:var(--muted); font:8px var(--pixel); }
.remix-history-panel summary b { color:var(--lime); font:11px var(--sans); }
.remix-history-list { display:grid; gap:1px; margin:0; padding:0; list-style:none; background:var(--line); }
.remix-history-item { display:flex; justify-content:space-between; gap:15px; align-items:start; padding:15px 18px; background:var(--night); }
.remix-history-item.current { background:rgba(201,255,74,.05); }
.remix-history-item strong { display:block; color:var(--ink); font-size:13px; }
.remix-history-item p,.remix-history-item small { display:block; margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.remix-history-item button { align-self:center; padding:7px 10px; border:1px solid var(--line); background:transparent; color:var(--lime); font-size:11px; white-space:nowrap; }
.remix-version-diff { color:#dcd3ef!important; }
.remix-reload-draft { margin:15px 18px; min-height:38px; font-size:11px; }
.remix-control-section { padding:26px; border-bottom:1px solid var(--line); }
.remix-control-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:24px; }
.remix-control-heading > span:first-child { color:var(--pink); font:8px/1.7 var(--pixel); }
.remix-small-badge { font-size:8px; color:var(--muted); white-space:nowrap; letter-spacing:.06em; }
.remix-controls label:not(.remix-photo-label) { display:block; margin:20px 0 9px; font-size:13px; font-weight:600; }
.remix-controls select,.remix-controls input:not([type=file]),.remix-controls textarea { width:100%; min-width:0; border:1px solid rgba(246,243,234,.2); background:#0d0c16; color:var(--ink); border-radius:0; min-height:47px; padding:11px 12px; font:14px/1.5 var(--sans); }
.remix-controls select { appearance:auto; }
.remix-controls textarea { resize:vertical; }
.remix-controls input:focus,.remix-controls textarea:focus,.remix-controls select:focus { outline:2px solid var(--lime); outline-offset:2px; }
.remix-field-note { color:var(--muted); font-size:12px; line-height:1.65; margin:9px 0 0; }
.remix-rule-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; }
.remix-controls .remix-rule-heading label { margin:0 0 9px; min-width:0; }
.remix-rule-reset { display:grid; place-items:center; flex:none; width:44px; height:44px; margin-bottom:4px; background:transparent; color:var(--lime); border:1px solid var(--line); font-size:23px; }
.remix-rule-reset:disabled { opacity:.35; cursor:default; }
.remix-rule-reset:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }
.remix-unsaved-summary { padding:20px 26px 0; border-top:1px solid var(--line); }
.remix-unsaved-summary > strong { color:var(--lime); font-size:12px; }
.remix-unsaved-summary dl { margin:12px 0 0; font-size:12px; }
.remix-unsaved-summary dl > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:10px; padding:7px 0; }
.remix-unsaved-summary dt { color:var(--muted); }
.remix-unsaved-summary dd { margin:0; color:var(--ink); overflow-wrap:anywhere; }
.remix-source { display:flex; flex-wrap:wrap; gap:7px 12px; font-size:11px; margin-top:16px; }
.remix-source > span { color:var(--muted); flex-basis:100%; }
.remix-source a { color:var(--lime); text-decoration:underline; text-underline-offset:3px; }
.remix-photo-row { display:flex; align-items:center; gap:18px; margin-top:25px; }
.remix-photo-preview { display:grid; place-items:center; width:74px; height:74px; flex:none; border:1px solid var(--line); color:var(--pink); background:#28203c; overflow:hidden; }
.remix-photo-preview > span { font:25px var(--pixel); }
.remix-photo-preview img { width:100%; height:100%; object-fit:cover; }
.remix-photo-label { cursor:pointer; min-height:42px; }
.remix-file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.remix-photo-row:focus-within .remix-photo-label { outline:2px solid var(--lime); outline-offset:2px; }
.remix-photo-disclosure { margin-top:15px; }
.remix-remove-photo { display:block; background:transparent; padding:5px 0; color:var(--muted); font-size:11px; text-decoration:underline; }
.remix-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.remix-ai-section { background:linear-gradient(135deg,rgba(172,119,255,.08),transparent); }
.remix-ai-section label { margin-top:0!important; }
.remix-ai-section > .button { margin-top:17px; }
.remix-change-summary { padding:15px; margin-top:18px; border-left:2px solid var(--lime); background:rgba(201,255,74,.05); }
.remix-change-summary strong { color:var(--lime); font-size:12px; }
.remix-change-summary p { color:#ded9e5; font-size:13px; margin:7px 0 0; }
.remix-editor-actions { display:flex; justify-content:space-between; align-items:center; gap:13px; padding:23px 26px; }
.remix-reset { background:transparent; color:var(--muted); font-size:12px; padding:12px 0; text-decoration:underline; }
.remix-playtest { min-width:0; position:sticky; top:101px; }
.remix-preview-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:15px; margin-bottom:19px; }
.remix-preview-heading .section-number { font-size:8px; }
.remix-preview-heading h2 { margin:10px 0 0; font-size:23px; line-height:1.3; overflow-wrap:anywhere; }
.remix-preview-badge { color:var(--muted); font-size:10px; padding:5px 9px; border:1px solid var(--line); flex-shrink:0; }
.remix-preview-tools { display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:0 0 12px; }
.remix-preview-tools .button { min-height:42px; font-size:12px; }
.remix-device { width:min(100%,390px); margin-inline:auto; border:1px solid rgba(246,243,234,.2); padding:8px; background:#06060c; box-shadow:9px 9px 0 rgba(117,169,255,.07); }
.remix-device-top { display:flex; align-items:center; justify-content:space-between; padding:12px 8px; color:var(--muted); font:6px var(--pixel); }
.remix-device-top .live-dot { flex:none; width:5px; height:5px; box-shadow:none; }
.remix-device-top > span:nth-child(2) { margin-right:auto; }
.remix-device iframe { display:block; width:100%; height:560px; max-height:73dvh; border:0; background:#10101a; }
.remix-preview-empty { display:flex; min-height:460px; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:30px; text-align:center; background:radial-gradient(ellipse at center,#28203c,#10101a); }
.remix-preview-empty > span { color:var(--pink); font-size:42px; }
.remix-preview-empty p { color:var(--muted); font-size:13px; }
.remix-playtest-note { color:var(--muted); text-align:center; margin:20px 0; font-size:12px; }
.remix-publish-panel { padding:20px; border:1px solid var(--line); background:var(--panel); text-align:center; }
.remix-publish-panel > .button { width:100%; }
.remix-publish-panel > p { margin:10px 0 0; font-size:11px; color:var(--muted); }
.remix-published { margin-top:20px; padding:22px; border:1px solid var(--lime); background:rgba(201,255,74,.04); }
.remix-published .section-number { font-size:8px; }
.remix-published h3 { font-size:23px; line-height:1.2; margin:15px 0 8px; }
.remix-published p { font-size:13px; color:var(--muted); }
.remix-studio [hidden],.remix-base-card[hidden] { display:none!important; }
.classic-player-section [hidden],.remix-rules-section[hidden] { display:none!important; }
.public-remix-lineage { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:40px; align-items:start; margin-top:35px; padding:30px; border:1px solid var(--line); background:var(--panel); }
.public-remix-lineage h2 { margin:10px 0 13px; font-size:34px; line-height:1.1; }
.public-remix-lineage p { color:var(--muted); font-size:14px; }
.public-remix-lineage .remix-source { margin-top:0; align-content:start; line-height:1.8; }
.public-remix-lineage .remix-source a { overflow-wrap:anywhere; }
@media(max-width:1000px) {
  .remix-base-card { grid-template-columns:1fr; }
  .remix-card-art { min-height:190px; max-height:230px; }
  .remix-card-merge { grid-template-columns:repeat(3,56px); justify-content:center; padding:15px; }
  .remix-card-breakout { padding-inline:35px; }
  .remix-workspace { gap:27px; }
  .remix-control-section { padding:21px; }
  .remix-editor-actions { padding:20px; }
  .remix-preview-heading { align-items:flex-start; flex-direction:column; gap:9px; }
  .remix-small-badge { display:none; }
}
@media(max-width:760px) {
  .classic-player-section { width:min(100% - 10vw,600px); padding:58px 0 65px; }
  .classic-player-grid { grid-template-columns:1fr; gap:20px; }
  .classic-player-frame iframe { height:560px; }
  .classic-player-side { display:flex; flex-direction:column; }
  .classic-player-note { order:3; margin:15px 0; }
  .classic-player-side > .button { order:4; }
  .public-remix-lineage { grid-template-columns:1fr; gap:25px; padding:23px; }
  .public-remix-lineage h2 { font-size:30px; }
  .remix-section-links { display:flex; justify-content:space-between; gap:15px; padding:14px 0 0; font-size:12px; color:var(--lime); }
  .remix-section-links a { padding:7px 0; text-decoration:underline; text-underline-offset:4px; }
  .remix-studio-heading { align-items:flex-start; flex-direction:column; gap:18px; padding-top:23px; }
  .remix-studio-heading > p { font-size:15px; }
  .remix-workspace { grid-template-columns:1fr; gap:30px; }
  .remix-playtest { position:static; }
  .remix-preview-heading { flex-direction:row; align-items:flex-end; }
  .remix-device iframe { height:560px; max-height:75dvh; }
  .remix-workflow { gap:19px; font-size:11px; }
  .remix-workflow b { display:block; margin-bottom:7px; }
  .remix-studio-heading h1 { font-size:48px; }
  .remix-playtest { order:1; }
  .remix-controls { order:2; }
}
@media(max-width:620px) {
  .remix-hero { gap:28px; padding-block:36px 55px; }
  .remix-hero .creator-intro { display:block; }
  .remix-hero .creator-intro > .section-number { font-size:7px; max-width:270px; margin-bottom:17px; }
  .remix-hero .hero-actions { gap:8px; margin-bottom:16px; }
  .remix-hero .hero-trust { font-size:10px; gap:11px; margin-top:17px; }
  .remix-hero-art { margin-right:5px; box-shadow:7px 7px 0 #262139; }
  .hero-inline-game iframe { height:430px; }
  .remix-art-caption { padding:13px; font-size:6px; }
  .remix-art-stage { min-height:290px; padding:22px; }
  .remix-art-grid { gap:6px; width:67%; }
  .remix-art-grid span { font-size:17px; }
  .remix-avatar-sticker { width:107px; right:16px; top:55px; padding:12px 9px; }
  .remix-avatar-sticker strong { font-size:7px; }
  .remix-pixel-face { width:52px; height:52px; font-size:24px; }
  .remix-art-note { font-size:10px; right:19px; }
  .remix-art-note strong { font-size:16px; }
  .remix-art-footer { font-size:9px; gap:8px; padding:14px; }
  .remix-library { padding-block:60px; }
  .remix-library-grid { grid-template-columns:1fr; gap:19px; }
  .remix-base-card { grid-template-columns:42% minmax(0,1fr); grid-template-rows:auto; }
  .remix-card-art { min-height:240px; max-height:none; }
  .remix-card-merge { grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:10px; }
  .remix-card-merge span { font-size:12px; }
  .remix-base-card-copy { padding:21px 15px; }
  .remix-card-eyebrow { font-size:6px; margin-bottom:16px; }
  .remix-base-card h3 { font-size:23px; }
  .remix-base-card p { font-size:12px; margin-bottom:17px; }
  .remix-base-card .button { min-height:43px; font-size:11px; padding-inline:10px; }
  .remix-card-breakout { padding:45px 12px; }
  .remix-bricks { gap:3px; }
  .remix-bricks i { height:11px; }
  .remix-snake-body { grid-template-columns:repeat(4,15px); grid-template-rows:repeat(3,15px); gap:2px; left:18%; }
  .remix-snake-body i:nth-child(6)::after { right:3px; top:3px; width:3px; height:3px; box-shadow:0 7px 0 #10251e; }
  .remix-snake-label { font-size:5px; right:12px; bottom:36px; }
  .remix-advanced details { padding:21px; }
  .remix-advanced summary .section-number { font-size:7px; line-height:1.8; }
  .remix-advanced summary strong { font-size:17px; }
  .remix-studio { padding-top:22px; }
  .remix-studio .breadcrumbs { font-size:10px; gap:8px; }
  .remix-control-heading > span:first-child { font-size:7px; }
  .remix-photo-row { gap:13px; }
  .remix-photo-preview { width:63px; height:63px; }
  .remix-photo-label { padding-inline:12px; font-size:12px; }
  .remix-field-grid { gap:10px; }
  .remix-controls select,.remix-controls input:not([type=file]),.remix-controls textarea { font-size:16px; }
  .remix-editor-actions { align-items:stretch; flex-direction:column; gap:4px; }
  .remix-preview-heading h2 { font-size:22px; }
  .remix-preview-badge { font-size:9px; }
  .remix-device { padding:5px; }
  .remix-published { padding:19px; }
}

body:has(.remix-preview-expanded) { overflow:hidden; }
.remix-playtest.remix-preview-expanded { position:fixed; inset:0; z-index:100; width:100vw; height:100dvh; padding:12px; margin:0; background:var(--night); display:flex; flex-direction:column; gap:0; overflow:hidden; }
.remix-preview-expanded .remix-preview-heading,.remix-preview-expanded .remix-playtest-note,.remix-preview-expanded .remix-publish-panel,.remix-preview-expanded .remix-published,.remix-preview-expanded .remix-history-panel { display:none!important; }
.remix-preview-expanded .remix-playtest-status { flex:0 0 36px; min-height:36px; line-height:18px; margin:0 0 8px; }
.remix-preview-expanded .remix-preview-tools { flex:0 0 44px; height:44px; margin:0 0 8px; justify-content:space-between; }
.remix-preview-expanded .remix-preview-tools .button { height:44px; min-height:44px; padding-inline:13px; }
.remix-preview-expanded .remix-device { display:flex; flex-direction:column; flex:1 1 0; min-height:0; width:100%; max-width:none; margin:0; padding:8px; border:1px solid var(--line); box-shadow:none; }
.remix-preview-expanded .remix-device-top { flex:0 0 30px; height:30px; padding:0 8px; line-height:1; }
.remix-preview-expanded .remix-device iframe { display:block; flex:1 1 0; min-height:0; width:100%; height:100%; max-height:none; margin:0; }
.remix-preview-expanded .remix-preview-empty { flex:1 1 0; min-height:0; }