/* The skyroom is shared by the menu, prompt, forge, and final reveal. */
:root { --arcade-cyan: #79e7ff; --arcade-blue: #3987ff; --arcade-glass: #061020e8; --arcade-line: #a3d3ff65; --arcade-mono: var(--font-game); }
.arcade-brand { position: relative; display: flex; flex-direction: column; width: fit-content; align-items: center; color: #fff; text-decoration: none; flex-shrink: 0; padding-top: 12px; filter: drop-shadow(3px 5px 0 #03060d); }
.arcade-brand > span { font: 400 clamp(32px, 4.6vw, 78px)/1 var(--font-game); letter-spacing: -.105em; transform: rotate(-3deg); -webkit-text-stroke: 1px #fff; text-shadow: -3px -3px #07111e, 4px 4px #07111e, -4px 4px #07111e; }
.arcade-brand > span > span { letter-spacing: -.12em; }
.arcade-brand small { margin-top: 15px; font: 10px/1 var(--arcade-mono); letter-spacing: .2em; text-transform: uppercase; }
.arcade-brand small b { color: var(--arcade-cyan); padding-inline: 7px; font-weight: 400; }
.arcade-crown { fill: currentColor; width: 38px; height: 25px; color: #fff; filter: drop-shadow(0 0 5px #4589ff); }
.arcade-brand > .arcade-crown { position: absolute; top: -12px; left: 42%; }
.arcade-nav { display: flex; align-self: start; justify-content: center; gap: clamp(18px, 2.2vw, 40px); padding-top: 4px; }
.arcade-nav a { position: relative; padding: 10px 0; color: #f1f5ff; text-decoration: none; text-transform: uppercase; font: 11px/1.3 var(--arcade-mono); letter-spacing: .1em; white-space: nowrap; text-shadow: 0 2px 6px #000; }
.arcade-nav a[aria-current] { color: #fff; text-shadow: 0 0 10px #3c91ff; }
.arcade-nav a[aria-current]::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #bcf9ff; box-shadow: 0 0 7px 2px #378aff; }
.arcade-nav a:hover { color: var(--arcade-cyan); }
.arcade-brand:focus-visible, .arcade-nav a:focus-visible { outline: 2px solid var(--arcade-cyan); outline-offset: 6px; }

/* Main menu */

/* Shared creator shell */
.create { --ob-faint: #aac4dd; --font-ob-hud: var(--arcade-mono); }
.create [hidden] { display: none !important; }
.create .create-sky { background: url('../../assets/ui/create/skyroom.webp') center / cover no-repeat; }
.create .create-haze { background: linear-gradient(0deg, #040a1899, transparent 24%), linear-gradient(180deg, #03091755, transparent 22%); }
.create .create-vignette { background: radial-gradient(ellipse, transparent 55%, #02081133); }
.create .create-shell { padding: 5.5vh 3.5vw 2.5vh; gap: 18px; }
.create .create-top { display: flex; align-items: flex-start; position: relative; gap: 5vw; min-height: 74px; }
.create .arcade-brand > span { font-size: clamp(32px, 3.5vw, 60px); }
.create .arcade-brand small { font-size: 8px; margin-top: 12px; }
.create .arcade-nav { margin-left: auto; margin-right: auto; }
.create .create-steps { position: absolute; right: 0; top: 42px; }
.create .create-body { overflow: visible; }
.create .create-foot { font: 10px/1 var(--arcade-mono); }
.create .create-foot .ob-prompts { font-size: 10px; }
.create button { touch-action: manipulation; }
.create button:active { transform: scale(.975); }
.create button:focus-visible { outline: 2px solid #a7f3ff; outline-offset: 4px; }
.create .ob-panel { border-radius: 4px; border-color: var(--arcade-line); background: var(--arcade-glass); backdrop-filter: blur(12px); }
.create .ob-cta { border-radius: 4px; min-height: 60px; font: 400 20px/1.2 var(--font-game); letter-spacing: -.06em; }
.create .ob-cta:not(:disabled) { color: #101518; background: linear-gradient(115deg, #ffd148, #fff1a0 48%, #ffd157); border: 2px solid #fff6b5; box-shadow: 0 0 4px 1px #fff9d0, 0 0 18px #ffcf5080, inset 0 0 18px #fff4b0; }
.create .ob-cta:not(:disabled):hover { background: #ffe98a; box-shadow: 0 0 6px 1px #fff9d0, 0 0 28px #ffcf5099; }
.create .ob-cta:disabled { background: linear-gradient(110deg, #b49b54, #c3b078); color: #1c2026; opacity: .7; border-color: #cfc19a; }
.create .ob-cta small { font: 10px/1.4 var(--arcade-mono); text-transform: uppercase; letter-spacing: .2em; }
.create .create-stage { animation: none; }
.create:is([data-stage='imagine'], [data-stage='loading']) .create-top { display: none; }
.create:is([data-stage='imagine'], [data-stage='loading']) .create-shell { grid-template-rows: minmax(0, 1fr) auto; padding-top: clamp(24px, 5vh, 60px); }
.create[data-stage='loading'] .create-body { min-height: 0; }


/* A single, centered prompt panel, with the world visible around it. */
.create-stage[data-stage='imagine'] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding-bottom: 12px; }
[data-stage='imagine'] .create-head { text-align: center; }
[data-stage='imagine'] .create-eyebrow .arcade-crown { color: #ffe67e; width: 40px; height: 28px; filter: drop-shadow(0 0 12px #ffc34b66); }
[data-stage='imagine'] .create-title { font: 400 clamp(24px, 3vw, 47px)/1.1 var(--font-game); letter-spacing: -.07em; text-shadow: 0 3px 2px #050b1b, 0 0 20px #07152f; margin: 12px 0 0; }
[data-stage='imagine'] .create-sub { font: 12px/1.5 var(--arcade-mono); color: #fff; letter-spacing: .15em; margin-top: 10px; text-shadow: 0 2px 6px #030711; }
[data-stage='imagine'] .create-cols { width: min(780px, 68vw); display: block; min-height: auto; }
[data-stage='imagine'] .create-col { overflow: visible; gap: 0; }
[data-stage='imagine'] .create-prompt { border: 2px solid #9cdeff; box-shadow: 0 0 4px 1px #3988ff, 0 0 16px #2465ff66; z-index: 1; border-radius: 5px 5px 0 0; }
[data-stage='imagine'] .ob-panel-head { padding: 14px 20px 0; background: none; border: 0; font: 600 13px/1 var(--arcade-mono); letter-spacing: .07em; text-transform: uppercase; color: #b1e4ff; }
[data-stage='imagine'] .create-prompt-body { padding: 12px 14px; }
[data-stage='imagine'] textarea { min-height: 105px; padding: 13px 16px 25px; border: 1px solid #67b4ff; border-radius: 4px; font: 16px/1.65 var(--arcade-mono); letter-spacing: .03em; background: #0a1830c9; box-shadow: inset 0 0 12px #22448766; }
[data-stage='imagine'] textarea::placeholder { color: #9babbd; }
[data-stage='imagine'] textarea:focus { outline: none; border-color: #a7ecff; box-shadow: 0 0 0 1px #2f80ff, inset 0 0 12px #25468299; }
[data-stage='imagine'] .create-count { font: 10px/1 var(--arcade-mono); right: 12px; bottom: 9px; color: #97c6e3; }
[data-stage='imagine'] .create-examples { margin-top: 9px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
[data-stage='imagine'] .create-examples > span { font: 10px/1 var(--arcade-mono); text-transform: none; letter-spacing: 0; }
[data-stage='imagine'] .create-chips { display: flex; gap: 5px; flex-wrap: wrap; }
[data-stage='imagine'] .create-chip { padding: 5px 7px; border: 0; border-bottom: 1px solid #829ab455; border-radius: 0; font: 10px/1.2 var(--arcade-mono); letter-spacing: 0; text-transform: none; color: #b6d5ed; background: transparent; }
[data-stage='imagine'] .create-group { padding: 14px 20px; background: #051020ed; border: 1px solid #8dbcec66; border-top: 0; backdrop-filter: blur(12px); }
[data-stage='imagine'] .create-group + .create-group { border-radius: 0 0 5px 5px; }
[data-stage='imagine'] .create-group h2 { font: 12px/1.2 var(--arcade-mono); letter-spacing: .02em; color: #c3e7fa; margin-bottom: 12px; }
[data-stage='imagine'] .create-group h2 small, [data-stage='imagine'] .create-group h2 em { font: 10px/1 var(--arcade-mono); letter-spacing: .02em; color: #92b6d0; }
[data-stage='imagine'] .create-tags { display: flex; flex-wrap: wrap; gap: 7px; }
[data-stage='imagine'] .create-tag { display: block; padding: 8px 11px; border: 1px solid #7697c27a; border-radius: 5px; min-height: 34px; background: linear-gradient(#23314a88, #111e3588); }
[data-stage='imagine'] .create-tag-icon { display: none; }
[data-stage='imagine'] .create-tag strong { font: 11px/1.1 var(--arcade-mono); letter-spacing: 0; text-transform: none; }
[data-stage='imagine'] .create-tag.is-on { background: #1e548c; border-color: #82dcff; box-shadow: 0 0 8px #2789ff55; }
[data-stage='imagine'] .create-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
[data-stage='imagine'] .create-style { position: relative; padding: 5px; border-radius: 4px; gap: 7px; text-align: center; border-color: #82a7d077; }
[data-stage='imagine'] .create-style i { position: relative; height: 59px; aspect-ratio: auto; overflow: hidden; border-radius: 2px; }
[data-stage='imagine'] .create-style i.style-auto { display: grid; place-items: center; font: normal 37px/1 var(--font-game); color: #d5faff; text-shadow: 0 0 12px #73d8ff; background: radial-gradient(ellipse, #2351a3, #0b1731 80%) !important; }
.style-auto::before, .style-auto::after { content: ''; position: absolute; inset: 7px 24%; border: 1px solid #84e1ff66; transform: rotate(-22deg); }
.style-auto::after { transform: rotate(22deg); }
.style-swatch img { width: 100%; height: 200%; object-fit: cover; object-position: center top; }
[data-stage='imagine'] .create-style.is-on { border: 1px solid #b3efff; box-shadow: 0 0 3px 1px #3988ff, 0 0 12px #3288ff66; background: #112b4a; }
[data-stage='imagine'] .create-style.is-on::after { content: '✓'; position: absolute; top: 7px; right: 7px; color: #071626; background: #98e8ff; width: 16px; height: 16px; font: 12px/16px var(--arcade-mono); border-radius: 50%; }
[data-stage='imagine'] .create-style strong { font: 12px/1.2 var(--arcade-mono); color: #e9f6ff; letter-spacing: .07em; }
[data-stage='imagine'] .create-style small { font: 9px/1.3 var(--arcade-mono); color: #a0bdd8; text-transform: none; letter-spacing: 0; }
[data-stage='imagine'] .create-cta-row { margin: 17px auto 0; width: min(420px, 100%); }
[data-stage='imagine'] .create-note { text-align: center; color: #e0eaf8; background: #040e237d; align-self: center; border-radius: 4px; padding: 5px 10px; margin: 10px 0 0; font: 10px/1.5 var(--arcade-mono); text-transform: none; letter-spacing: 0; }
[data-stage='imagine'] .create-note:empty { display: none; }

/* Checkpoint-driven forge */
.create-stage.forge-stage { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 24px; padding-top: 8px; }
.forge-phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.forge-phases li { display: flex; align-items: center; gap: 14px; position: relative; padding: 16px; border: 1px solid #90b6e06b; background: #061021eb; border-radius: 4px; color: #8796b0; }
.forge-phases li + li::before { content: '›'; position: absolute; left: -13px; color: #bdeeff; font: 20px/1 var(--arcade-mono); }
.forge-phases i { font: normal 20px/1 var(--font-game); flex: none; }
.forge-phases li > span { display: grid; gap: 7px; }
.forge-phases strong { font: 600 12px/1.2 var(--arcade-mono); letter-spacing: .02em; text-transform: uppercase; }
.forge-phases small { font: 9px/1.3 var(--arcade-mono); color: #9db8d3; letter-spacing: .06em; text-transform: uppercase; }
.forge-phases .is-done i { color: #a3ffeb; text-shadow: 0 0 12px #5adcc4; }
.forge-phases .is-done { color: #e8f4ff; }
.forge-phases .is-active { color: #fff; border-color: #9fe9ff; box-shadow: 0 0 3px 1px #488aff, 0 0 16px #2764ee77, inset 0 0 18px #3069c850; }
.forge-phases .is-active i { color: #8ddfff; animation: forge-status 1.6s ease-in-out infinite; }
.forge-layout { display: grid; grid-template-columns: minmax(220px, 27%) minmax(0, 1fr) minmax(220px, 26%); gap: 16px; min-height: 0; }
.forge-sidebar { position: relative; z-index: 3; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding-top: 20px; }
.forge-panel { border: 1px solid #88b0df99; border-radius: 4px; background: #061020e8; box-shadow: 0 10px 35px #03071344; overflow: hidden; }
.forge-panel h2 { margin: 0; padding: 13px 16px; border-bottom: 1px solid #7fa3d255; font: 600 12px/1.3 var(--arcade-mono); letter-spacing: .09em; text-transform: uppercase; color: #d0eaff; }
.forge-panel blockquote { margin: 13px; padding: 13px; border: 1px solid #7792be77; border-radius: 3px; background: #0b1730; font: 14px/1.6 var(--arcade-mono); color: #edf4ff; overflow-wrap: anywhere; }
.forge-panel .create-minitags { padding: 0 14px 14px; gap: 7px; }
.forge-panel .create-minitags i { font: normal 9px/1 var(--arcade-mono); color: #a7e2fc; padding: 6px 9px; border: 1px solid #6d9ad077; border-radius: 3px; }
.forge-panel > p { padding: 0 16px; font: 12px/1.6 var(--arcade-mono); color: #c4d8ec; }
.forge-evolution { display: grid; grid-template-columns: 1fr 15px 1fr; align-items: center; padding: 13px; gap: 7px; }
.forge-evolution > div { position: relative; height: 142px; display: flex; align-items: center; justify-content: center; border: 1px solid #6b92c088; background: linear-gradient(#17283f, #10192e); border-radius: 3px; overflow: hidden; }
.forge-evolution img { width: 100%; height: 100%; object-fit: contain; }
.forge-evolution small { position: absolute; bottom: 0; width: 100%; background: #050c1bcc; padding: 6px 2px; text-align: center; color: #b8d8f1; font: 8px/1.1 var(--arcade-mono); text-transform: uppercase; }
.forge-evolution span { color: #93c6f2; font: 28px/1 var(--font-game); }
.forge-center { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.forge-chamber { position: relative; width: 100%; flex: 1; min-height: 230px; isolation: isolate; overflow: hidden; contain: paint; }
.forge-grid { position: absolute; inset: 5% 3% 7%; transform: perspective(800px) rotateY(-12deg); border: 1px solid #83cdff99; background-image: linear-gradient(#458dff22 1px, transparent 1px), linear-gradient(90deg, #458dff22 1px, transparent 1px); background-size: 32px 32px; box-shadow: inset 0 0 35px #3090ff33, 0 0 30px #2b82ff33; mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.forge-chamber::before { content: ''; position: absolute; inset: 5% 0; z-index: -1; background: radial-gradient(ellipse, #3978ff55, #33cdff1c 40%, transparent 70%); }
.forge-orbit { position: absolute; bottom: 18px; left: 5%; width: 90%; height: 50px; border: 2px solid #9de9ff; border-radius: 50%; box-shadow: 0 0 7px #fff, 0 0 22px #3790ff, inset 0 0 15px #529aff; }
.orbit-two { bottom: 12%; left: 9%; width: 82%; height: 34px; opacity: .6; animation: forge-orbit 5s ease-in-out infinite; }
.forge-beam { position: absolute; inset: 15% 4% auto; height: 2px; background: #abecff; box-shadow: 0 0 20px 3px #267fff88; z-index: 2; opacity: .6; animation: forge-scan 5s ease-in-out infinite; }
#forge-art { position: absolute; inset: 22px 0 28px; width: 100%; height: calc(100% - 50px); object-fit: contain; filter: drop-shadow(0 0 17px #407fff66); animation: concept-arrive 600ms var(--ob-ease) both; }
.forge-art-label { position: absolute; z-index: 4; top: 12px; left: 12px; padding: 7px 11px; background: #07132ee6; border: 1px solid #80caff77; color: #acebff; text-transform: uppercase; font: 9px/1 var(--arcade-mono); letter-spacing: .14em; }
.forge-placeholder { position: absolute; z-index: 3; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 20px; }
.forge-placeholder svg { width: 64px; height: 42px; fill: #baf7ff; filter: drop-shadow(0 0 12px #4992ff); animation: forge-status 2s ease-in-out infinite; }
.forge-placeholder span { font: 16px/1.3 var(--font-game); color: #fff; text-shadow: 0 2px 8px #040d1c; }
.forge-placeholder small { max-width: 260px; font: 11px/1.5 var(--arcade-mono); color: #c1d9ec; background: #08142fa8; padding: 7px; }
.forge-progress { position: relative; z-index: 3; flex: none; text-align: center; width: 100%; padding: 20px 4px 0; }
.forge-progress h1 { font: 400 16px/1.3 var(--font-game); letter-spacing: -.04em; margin: 0; text-transform: uppercase; text-shadow: 0 2px 8px #040714; }
.forge-progress p { min-height: 34px; margin: 8px 0; color: #c8e8ff; font: 11px/1.5 var(--arcade-mono); text-shadow: 0 2px 4px #000; }
.forge-progress progress { width: 100%; height: 19px; appearance: none; border: 1px solid #77c1ff; background: #071428; border-radius: 3px; padding: 3px; box-shadow: 0 0 7px #296bffaa; }
.forge-progress progress::-webkit-progress-bar { background: #08192d; }
.forge-progress progress::-webkit-progress-value { background: linear-gradient(90deg, #2476ff, #73eaff); box-shadow: 0 0 10px #69cfff; transition: width 500ms var(--ob-ease); }
.forge-progress progress::-moz-progress-bar { background: linear-gradient(90deg, #2476ff, #73eaff); }
#forge-count { display: block; color: #def2ff; margin-top: 9px; font: 11px/1.2 var(--arcade-mono); letter-spacing: .1em; text-shadow: 0 2px 4px #000; }
.forge-controls { position: relative; z-index: 3; flex: none; display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.forge-controls .create-ghost { font: 10px/1.2 var(--arcade-mono); background: #081323d9; border-radius: 3px; padding: 10px; }
.forge-controls .ob-cta { font: 12px/1.3 var(--arcade-mono); min-height: 40px; padding: 9px; letter-spacing: 0; }
.forge-background { position: relative; z-index: 3; text-align: center; margin-top: 10px; font: 10px/1.4 var(--arcade-mono); }
.forge-background a { display: inline-block; color: #def2ff; padding: 8px 12px; text-underline-offset: 4px; }
.forge-background span { display: block; color: #bdd4e9; }
.forge-moves { display: grid; gap: 0; padding: 10px 14px; }
.forge-moves > p { font: 12px/1.6 var(--arcade-mono); color: #bdd4e9; }
.forge-move { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.forge-move + .forge-move { border-top: 1px solid #709dc32b; }
.forge-move .create-move-icon { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid #548ec9; background: radial-gradient(ellipse at bottom, #19497e, #0a1832); box-shadow: inset 0 0 12px #429aff22; flex: none; color: #a5e7ff; }
.forge-move .create-move-icon svg { width: 26px; height: 26px; }
.forge-move > span + span { display: grid; gap: 6px; min-width: 0; }
.forge-move strong { font: 600 11px/1.3 var(--arcade-mono); text-transform: uppercase; color: #eff8ff; }
.forge-move small { font: 9px/1.2 var(--arcade-mono); color: #7bdcff; text-transform: uppercase; }
.forge-panel .create-stats { padding: 5px 16px 18px; }
.forge-particles { position: absolute; inset: 0; pointer-events: none; }
.forge-particles i { position: absolute; bottom: 6%; left: 15%; width: 5px; height: 5px; background: #a0eeff; box-shadow: 0 0 9px #639dff; animation: forge-particle 5s linear infinite; }
.forge-particles i:nth-child(2) { left: 30%; animation-delay: -1.1s; }
.forge-particles i:nth-child(3) { left: 50%; animation-delay: -2.9s; }
.forge-particles i:nth-child(4) { left: 74%; animation-delay: -1.7s; }
.forge-particles i:nth-child(5) { left: 90%; animation-delay: -3.5s; }
.forge-particles i:nth-child(6) { left: 8%; animation-delay: -4.5s; }
.forge-particles i:nth-child(7) { left: 42%; animation-delay: -3.9s; }
.forge-particles i:nth-child(8) { left: 65%; animation-delay: -.4s; }
.is-paused *, .is-paused::before { animation-play-state: paused !important; }
.is-paused #forge-art { animation: none; opacity: 1; transform: none; }

/* Final reveal: celebration stays inside the hero; controls keep their own plane. */
.create[data-stage='reveal'] .create-haze { background: linear-gradient(0deg, #050a1888, transparent 30%); }
.create[data-stage='reveal'] .arcade-nav { opacity: .8; }
.create-cols.is-reveal { grid-template-columns: minmax(0, 1fr) minmax(340px, 32%); gap: 0; }
.is-reveal .create-hero { isolation: isolate; contain: paint; overflow: hidden; background: none; border-radius: 0; }
.is-reveal .create-hero::after { display: none; }
.is-reveal .create-hero > img { inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 45%; filter: drop-shadow(0 8px 20px #13264a77); animation: fighter-arrive 780ms 150ms cubic-bezier(.16,1,.3,1) both; }
.is-reveal .create-hero-copy { text-align: left; left: 1%; bottom: 12%; right: 13%; z-index: 2; animation: reveal-name 500ms 380ms cubic-bezier(.16,1,.3,1) both; }
.is-reveal .create-hero-kicker { font: 13px/1.3 var(--arcade-mono); letter-spacing: .2em; color: #fff; text-shadow: 0 2px 8px #001027; }
.is-reveal .create-hero-name { font: 400 clamp(45px, 7vw, 110px)/.95 var(--font-game); letter-spacing: -.1em; overflow-wrap: anywhere; max-width: 12ch; margin: 12px 0; text-shadow: 3px 0 #40cbff, -3px 1px #e646ac, 0 6px 0 #050b1a, 0 0 35px #081329; }
.is-reveal .create-hero-title { font: 15px/1.5 var(--arcade-mono); letter-spacing: .2em; color: #6ae6ff; text-shadow: 0 3px 8px #00112c; }
.is-reveal .create-reveal-card { position: relative; z-index: 3; border: 1px solid #9ddaff; background: #04101eef; border-radius: 4px; box-shadow: 0 0 4px #5394ff, 0 15px 40px #02071077; animation: reveal-card 400ms 520ms cubic-bezier(.16,1,.3,1) both; align-self: center; max-height: 100%; }
.is-reveal .create-reveal-card > header { background: none; color: #9fdbf4; padding: 13px 20px; font: 10px/1.2 var(--arcade-mono); letter-spacing: .14em; }
.is-reveal .create-reveal-body { padding: 14px 22px 18px; overflow-y: auto; }
.is-reveal .create-name { font: 400 clamp(24px, 3vw, 48px)/1.05 var(--font-game); letter-spacing: -.09em; overflow-wrap: anywhere; }
.is-reveal .create-cardtitle { font: 12px/1.5 var(--arcade-mono); color: #70e7ff; letter-spacing: .15em; margin: 9px 0 14px; }
.is-reveal .create-minitags { flex-wrap: wrap; gap: 6px; }
.is-reveal .create-minitags i { font: normal 9px/1 var(--arcade-mono); letter-spacing: .05em; border: 1px solid #779dc977; padding: 5px 8px; border-radius: 2px; color: #c2e5ff; }
.is-reveal .create-blurb { font: 12px/1.65 var(--arcade-mono); color: #c6d7ed; margin: 14px 0; }
.create .create-stat { grid-template-columns: 75px minmax(0, 1fr) 16px; gap: 9px; font: 11px/1.2 var(--arcade-mono); letter-spacing: .025em; margin-bottom: 6px; }
.create .create-stat > span { font: 10px/1.2 var(--arcade-mono); text-transform: uppercase; color: #d6e5f6; }
.create .create-stat i { background: #24324e; height: 9px; border-radius: 0; }
.create .create-stat b { border-radius: 0; background: linear-gradient(90deg, #228bff, #82f7ff); }
.create .create-stat output { font: 10px/1 var(--arcade-mono); color: #82d7ef; }
.reveal-moves-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 18px; }
.reveal-moves-head .create-cardlabel { font: 10px/1.2 var(--arcade-mono); color: #e3ecfa; letter-spacing: .07em; margin: 0; }
.reveal-moves-head .create-ghost { padding: 4px 0; border: 0; color: #9ce7ff; font: 9px/1.2 var(--arcade-mono); background: none; white-space: nowrap; }
.is-reveal .create-signature { gap: 6px; margin-top: 12px; }
.is-reveal .create-signature-move { border: 0; background: none; padding: 0; gap: 7px; align-content: start; }
.is-reveal .create-signature-move .create-move-icon { display: grid; place-items: center; width: 100%; height: 55px; border: 1px solid #8fbcf0aa; border-radius: 3px; color: #b3eaff; background: radial-gradient(ellipse at 80% 80%, #a32f9755, transparent 70%), linear-gradient(130deg, #0a213c, #184b73); box-shadow: inset 0 0 12px #63bfff33; }
.is-reveal .create-signature-move .create-move-icon svg { width: 31px; height: 31px; filter: drop-shadow(0 0 4px #558eff); }
.is-reveal .create-signature-move strong { font: 10px/1.25 var(--arcade-mono); letter-spacing: 0; overflow-wrap: anywhere; }
.is-reveal .create-signature-move small { font: 8px/1.2 var(--arcade-mono); letter-spacing: 0; color: #91d8f3; }
.is-reveal .create-reveal-actions { gap: 8px; padding: 0 16px 16px; border-top: 0; }
.is-reveal .create-reveal-actions .ob-cta { font-size: clamp(16px, 1.45vw, 24px); min-height: 66px; gap: 15px; padding: 9px; }
.is-reveal .create-reveal-actions .ob-cta svg { width: 26px; height: 26px; }
.is-reveal .create-action { grid-template-columns: minmax(0, 1fr); min-height: 48px; padding: 8px 14px; border-radius: 3px; border-color: #7cbae4aa; background: #071525; gap: 15px; }
.is-reveal .create-action strong { font: 14px/1.2 var(--arcade-mono); letter-spacing: .05em; }
.is-reveal .create-action small { font: 8px/1.3 var(--arcade-mono); color: #75dcf0; letter-spacing: .14em; }
.is-reveal .reveal-secondary { display: none; }
.reveal-burst { position: absolute; inset: -15% -20%; opacity: 0; pointer-events: none; background: radial-gradient(ellipse at 45% 45%, #cdf6ffb3, #57aaff33 30%, transparent 63%); animation: reveal-burst 1100ms var(--ob-ease) both; }
.reveal-streaks { position: absolute; inset: 0; pointer-events: none; opacity: .6; background: repeating-conic-gradient(from 12deg at 50% 40%, transparent 0 17deg, #8bd3ff33 17.1deg 17.3deg, transparent 17.4deg 24deg); mask-image: radial-gradient(ellipse, transparent 35%, #000 70%, transparent); animation: reveal-streaks 900ms var(--ob-ease) both; }

@keyframes screen-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes concept-arrive { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes forge-status { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes forge-orbit { 0%,100% { transform: scaleX(1); opacity: .6; } 50% { transform: scaleX(.87) translateY(-16px); opacity: .9; } }
@keyframes forge-scan { 0%,100% { transform: translateY(0); opacity: .1; } 50% { transform: translateY(240px); opacity: .6; } }
@keyframes forge-particle { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .85; } 100% { transform: translate(15px, -300px); opacity: 0; } }
@keyframes fighter-arrive { from { opacity: 0; transform: translate(45px, 25px) scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes reveal-name { from { opacity: 0; transform: translateX(-35px); } to { opacity: 1; transform: none; } }
@keyframes reveal-card { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes reveal-burst { 0% { opacity: .85; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes reveal-streaks { from { opacity: .9; transform: scale(.93); } to { opacity: .2; transform: scale(1.06); } }

@media (max-height: 800px) and (min-width: 901px) {
  .create .create-shell { padding-top: 4vh; gap: 12px; }
  .create .create-top { min-height: 66px; }
  .create-stage[data-stage='imagine'] { gap: 15px; }
  [data-stage='imagine'] .create-eyebrow { display: none; }
  [data-stage='imagine'] .create-title { margin-top: 0; font-size: 32px; }
  [data-stage='imagine'] .create-cols { width: min(740px, 67vw); }
  [data-stage='imagine'] textarea { min-height: 91px; height: 91px; }
  [data-stage='imagine'] .create-group { padding-block: 10px; }
  [data-stage='imagine'] .create-group h2 { margin-bottom: 8px; }
  [data-stage='imagine'] .create-style i { height: 46px; }
  [data-stage='imagine'] .create-cta-row { margin-top: 12px; }
  [data-stage='imagine'] .ob-cta { min-height: 54px; }
  .forge-phases li { padding: 12px; }
  .forge-evolution > div { height: 110px; }
  .forge-sidebar { padding-top: 0; gap: 12px; }
  .forge-move { padding-block: 7px; }
  .is-reveal .create-reveal-body { padding: 10px 18px; }
  .is-reveal .create-blurb { margin: 10px 0; font-size: 11px; }
  .is-reveal .create-reveal-actions { gap: 6px; padding-bottom: 12px; }
  .is-reveal .create-action { min-height: 43px; }
  .is-reveal .create-reveal-actions .ob-cta { min-height: 56px; }
  .is-reveal .create-name { font-size: 32px; }
  .is-reveal .create-cardtitle { margin-bottom: 8px; }
  .reveal-moves-head { margin-top: 12px; }
}
@media (max-width: 1200px) {
  .arcade-nav { gap: 17px; }
  .arcade-nav a { font-size: 10px; }
  .forge-layout { grid-template-columns: 25% minmax(0, 1fr) 26%; gap: 14px; }
  .forge-phases { gap: 10px; }
  .forge-phases li { gap: 9px; padding: 11px; }
  .forge-phases strong { font-size: 10px; }
  .forge-phases small { font-size: 8px; }
  .forge-phases li + li::before { left: -9px; }
  .forge-panel blockquote { font-size: 12px; padding: 10px; margin: 10px; }
  .forge-panel h2 { font-size: 11px; padding: 12px; }
  .forge-panel > p { font-size: 11px; padding-inline: 12px; }
  .forge-moves { padding-inline: 10px; }
  .forge-move { gap: 8px; }
  .forge-move .create-move-icon { width: 34px; height: 34px; }
  .forge-move strong { font-size: 10px; }
  .forge-panel .create-stats { padding-inline: 12px; }
  .create-cols.is-reveal { grid-template-columns: minmax(0, 1fr) 350px; }
}
@media (max-width: 900px) {
  .create { position: relative; overflow: clip; min-height: 100svh; }
  .create .create-world { position: fixed; }
  .create .create-shell { height: auto; min-height: 100svh; padding: 32px 24px 18px; gap: 24px; }
  .create .create-top { flex-wrap: wrap; gap: 20px; min-height: 0; }
  .create .arcade-nav { margin: 0 0 0 auto; gap: 16px; align-self: center; flex-wrap: wrap; justify-content: flex-end; max-width: 60%; }
  .create .create-top .arcade-brand > span { font-size: 37px; }
  .create .create-steps { position: static; width: 100%; }
  .create-stage[data-stage='imagine'] { padding: 10px 0; gap: 22px; }
  [data-stage='imagine'] .create-cols { width: min(100%, 740px); }
  [data-stage='imagine'] .create-title { font-size: 30px; }
  [data-stage='imagine'] .create-sub { font-size: 10px; letter-spacing: .07em; }
  .forge-phases { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .forge-phases li { flex-direction: column; gap: 8px; padding: 10px 4px; text-align: center; }
  .forge-phases small { display: none; }
  .forge-phases strong { font-size: 9px; }
  .forge-phases li + li::before { display: none; }
  .forge-layout { grid-template-columns: 1fr 1fr; gap: 20px; }
  .forge-center { grid-column: 1 / -1; grid-row: 1; }
  .forge-chamber { min-height: 400px; max-width: 500px; }
  .forge-progress { max-width: 500px; }
  .forge-sidebar { padding-top: 0; }
  .forge-details { grid-column: 2; }
  .create-cols.is-reveal { grid-template-columns: minmax(0, 1fr) 320px; }
  .is-reveal .create-hero { min-height: 600px; }
  .is-reveal .create-hero > img { inset: 0; width: 100%; height: 85%; }
  .is-reveal .create-hero-copy { bottom: 7%; left: 0; right: 0; }
  .is-reveal .create-hero-name { font-size: 56px; }
  .is-reveal .create-reveal-card { max-height: none; }
}
@media (max-width: 600px) {
  .arcade-brand > span { font-size: 42px; }
  .arcade-brand small { font-size: 8px; }
  .arcade-nav { gap: 15px; overflow-x: auto; max-width: 100%; justify-content: flex-start; scrollbar-width: none; }
  .arcade-nav a { font-size: 9px; }
  .create .create-shell { padding: 30px 16px 20px; gap: 24px; }
  .create .create-top { gap: 14px; }
  .create .arcade-nav { width: 100%; max-width: 100%; flex-wrap: nowrap; justify-content: flex-start; margin: 0; gap: 18px; }
  .create .create-top .arcade-brand > span { font-size: 38px; }
  .create .account-link { margin: 0; }
  .create-stage[data-stage='imagine'] { padding: 0; gap: 20px; }
  [data-stage='imagine'] .create-eyebrow { display: none; }
  [data-stage='imagine'] .create-title { font-size: 26px; max-width: 14ch; margin: 0 auto; }
  [data-stage='imagine'] .create-sub { max-width: 35ch; margin: 12px auto 0; font-size: 10px; text-transform: none; letter-spacing: 0; }
  [data-stage='imagine'] .create-prompt-body { padding: 12px; }
  [data-stage='imagine'] textarea { font-size: 14px; min-height: 132px; padding-inline: 12px; }
  [data-stage='imagine'] .ob-panel-head { padding-left: 15px; }
  [data-stage='imagine'] .create-examples { gap: 7px; }
  [data-stage='imagine'] .create-chips { gap: 4px; }
  [data-stage='imagine'] .create-chip { padding: 7px 5px; font-size: 10px; }
  [data-stage='imagine'] .create-group { padding: 14px 13px; }
  [data-stage='imagine'] .create-group h2 { font-size: 11px; gap: 5px; flex-wrap: wrap; }
  [data-stage='imagine'] .create-group h2 small, [data-stage='imagine'] .create-group h2 em { font-size: 9px; }
  [data-stage='imagine'] .create-tags { gap: 7px; }
  [data-stage='imagine'] .create-tag { min-height: 37px; padding: 9px 11px; }
  [data-stage='imagine'] .create-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  [data-stage='imagine'] .create-style i { height: 55px; }
  [data-stage='imagine'] .create-style small { font-size: 10px; }
  [data-stage='imagine'] .ob-cta { font-size: 21px; min-height: 62px; }
  .create .create-foot .ob-prompts { font-size: 9px; gap: 20px; }
  .create .create-foot .ob-badge { width: 22px; height: 22px; }
  .forge-phases strong { font-size: 8px; }
  .forge-phases li { padding: 10px 2px; }
  .forge-phases i { font-size: 16px; }
  .forge-layout { display: flex; flex-direction: column; gap: 18px; }
  .forge-center { order: -1; }
  .forge-chamber { min-height: 340px; width: 90%; }
  .forge-grid { inset-inline: 3%; }
  #forge-art { width: 100%; left: 0; }
  .forge-progress h1 { font-size: 16px; }
  .forge-panel h2 { font-size: 12px; }
  .forge-panel blockquote { font-size: 13px; }
  .forge-concept-card { display: none; }
  .forge-details { display: grid; grid-template-columns: 1fr; gap: 18px; }
  .forge-moves { grid-template-columns: 1fr 1fr; gap: 10px; }
  .forge-move + .forge-move { border: 0; }
  .create-cols.is-reveal { display: flex; flex-direction: column; }
  .is-reveal .create-hero { min-height: 430px; }
  .is-reveal .create-hero > img { inset: 0; width: 100%; height: 100%; }
  .is-reveal .create-hero-copy { bottom: 4%; left: 0; right: 0; }
  .is-reveal .create-hero-kicker { font-size: 10px; }
  .is-reveal .create-hero-name { font-size: clamp(45px, 12vw, 70px); max-width: 100%; }
  .is-reveal .create-hero-title { font-size: 12px; letter-spacing: .1em; }
  .is-reveal .create-reveal-card { width: 100%; margin-top: 15px; }
  .is-reveal .create-reveal-body { padding: 16px 20px; }
  .is-reveal .create-name { font-size: 32px; }
  .is-reveal .create-reveal-actions .ob-cta { font-size: 21px; min-height: 65px; }
  .is-reveal .create-action { min-height: 58px; }
  .is-reveal .create-action strong { font-size: 15px; }
  .create .create-notice { top: 18px; max-width: 90vw; font: 12px/1.5 var(--arcade-mono); text-transform: none; letter-spacing: 0; }
}
@media (max-height: 660px) and (min-width: 901px) {
  .create { position: absolute; min-height: 720px; }
  body:has(.create) { overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-burst { display: none; }
  .reveal-streaks { opacity: .15; }
  .forge-beam { display: none; }
}
/* Keep the six actions and featured arena inside the desktop menu grid. */
@media (min-width: 901px) {
}
.create .create-top { z-index: 5; }
@media (max-width: 900px) {
  .create .arcade-nav { width: 100%; max-width: 100%; justify-content: flex-start; flex-wrap: nowrap; margin: 0; order: 3; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .create-cols.is-reveal { display: flex; flex-direction: column; }
  .is-reveal .create-hero { min-height: 520px; }
  .is-reveal .create-hero > img { inset: 0; width: 100%; height: 100%; }
  .is-reveal .create-hero-copy { bottom: 3%; }
  .is-reveal .create-reveal-card { width: 100%; margin-top: 20px; }
}
/* Scroll the whole card so the actions always follow the complete move strip. */
.is-reveal .create-reveal-card { display: block; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #779dc9 #071525; }
.is-reveal .create-reveal-body { overflow: visible; }
.is-reveal .create-reveal-actions { padding-top: 14px; }
.is-reveal .create-blurb { font-size: 12px; line-height: 1.5; }
.is-reveal .create-stats { margin-top: 14px; gap: 3px; }
.is-reveal .create-stat { margin-bottom: 3px; }
.is-reveal .create-name { font-size: clamp(24px, 2.5vw, 40px); }
@media (min-width: 901px) and (max-height: 800px) {
  .is-reveal .create-blurb { font-size: 11px; line-height: 1.45; }
  .is-reveal .create-name { font-size: 28px; }
}
@media (min-width: 1001px) and (max-height: 660px) {
  .create[data-stage='reveal'] { position: fixed; min-height: 0; }
  body:has(.create[data-stage='reveal']) { overflow: hidden; }
}
[data-stage='imagine'] .create-style i.style-pixel { background: linear-gradient(155deg, #151c47, #365185) !important; }
.style-pixel svg { width: 100%; height: 100%; }
.is-reveal .create-signature-move .create-move-icon { position: relative; overflow: hidden; }
.is-reveal .create-signature-move .create-move-icon canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.create h1[tabindex='-1']:focus { outline: none; }
.create .create-stat { grid-template-columns: 82px minmax(0, 1fr) 16px; }

/* The move reference uses page scrolling; no fixed footer can cover a move. */
body:has(.create[data-stage='moves']) { overflow-y: auto; }
.create[data-stage='moves'] { position: relative; min-height: 100svh; overflow: clip; }
.create[data-stage='moves'] .create-world { position: fixed; }
.create[data-stage='moves'] .create-shell { height: auto; min-height: 100svh; }
.create-stage[data-stage='moves'] { height: auto; }
[data-stage='moves'] .create-title { font-size: clamp(28px, 3vw, 42px); line-height: 1.1; }
.create-cols.is-moves { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); align-items: start; }
.is-moves .create-col { min-width: 0; overflow: visible; }
.is-moves .create-fightercard { padding: 18px; border: 1px solid var(--arcade-line); border-radius: 4px; background: var(--arcade-glass); }
.is-moves .create-name { font-size: 32px; line-height: 1.05; overflow-wrap: anywhere; }
.is-moves .create-blurb { font: 12px/1.6 var(--arcade-mono); color: #c6d7ed; }
.is-moves .create-cardtitle { margin-bottom: 14px; }
.is-moves .create-combo-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.is-moves .create-combo-step { width: auto; min-width: 0; height: 100%; }
.is-moves .create-combo-step small { overflow-wrap: anywhere; }
.is-moves .create-combo-arrow { display: none; }
.is-moves .create-moves { display: flex; flex-direction: column; min-width: 0; overflow: visible; }
.is-moves .create-moves > .ob-panel-head { flex-wrap: wrap; padding: 12px 16px; }
.is-moves .create-moves > .ob-panel-head em { overflow-wrap: anywhere; }
.is-moves .create-moves-top { flex-wrap: wrap; padding: 16px 16px 0; }
.is-moves .create-moves-caption { max-width: 52ch; font-size: 10px; line-height: 1.6; letter-spacing: 0; text-transform: none; }
.is-moves .create-filter { flex-wrap: wrap; border-radius: 6px; }
.is-moves .create-filter-tab { min-height: 36px; padding-inline: 14px; font-size: 10px; border-radius: 3px; }
.is-moves .create-moves-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding: 18px 16px; gap: 22px 16px; }
.is-moves .create-move-group { min-width: 0; }
.is-moves .create-move-group header { flex-direction: column; align-items: flex-start; gap: 5px; padding-bottom: 9px; }
.is-moves .create-move-group header strong { font-size: 18px; }
.is-moves .create-move-group header small { font-size: 9px; line-height: 1.4; letter-spacing: 0; }
.is-moves .create-move-list { gap: 6px; }
.is-moves .create-move { padding: 10px; }
.is-moves .create-move-head { align-items: flex-start; }
.is-moves .create-move-head strong { font-size: 17px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
.is-moves .create-move-text small { font-size: 8px; line-height: 1.5; white-space: normal; letter-spacing: .03em; }
.is-moves .create-move-keys i { min-width: 18px; height: 20px; font-size: 9px; }
.is-moves .create-remember { padding: 14px 16px; }
.is-moves .create-remember ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.is-moves .create-remember li { font-size: 9px; letter-spacing: 0; }
.is-moves .create-moves-foot { display: flex; justify-content: flex-end; padding: 16px; }
.is-moves .create-moves-foot .ob-cta { width: auto; min-width: 220px; min-height: 48px; font-size: 17px; }
@media (max-width: 1150px) {
  .is-moves .create-moves-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .create-cols.is-moves { grid-template-columns: minmax(0, 1fr); }
  .is-reviewing-moves .create-moves { grid-row: 1; }
  .is-moves .create-moves-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .is-moves .create-moves-groups, .is-moves .create-remember ul { grid-template-columns: minmax(0, 1fr); }
  .is-moves .create-moves-foot .ob-cta { width: 100%; min-width: 0; }
  .is-reveal .create-signature { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
}
.create .create-stat > span { white-space: nowrap; letter-spacing: .02em; }

/* A one-shot power-up, clipped to the art and synchronized with reveal.wav. */
.reveal-shockwave { position: absolute; pointer-events: none; inset: 17% 14% 27%; border: 3px solid #dcfaff; border-radius: 50%; box-shadow: 0 0 35px #66caff, inset 0 0 28px #66caff; opacity: 0; animation: challenger-wave 850ms 280ms cubic-bezier(.16,1,.3,1) both; }
.reveal-sparks { position: absolute; pointer-events: none; inset: 0; overflow: hidden; }
.reveal-sparks i { position: absolute; left: 50%; top: 42%; width: 5px; height: 16px; background: #ffeaa0; box-shadow: 0 0 14px #ffca5e; opacity: 0; transform: rotate(calc(var(--spark) * 22.5deg)); animation: challenger-spark 1050ms 300ms cubic-bezier(.16,1,.3,1) both; }
@keyframes challenger-wave { 0% { transform: scale(.7); opacity: 0; } 15% { opacity: .85; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes challenger-spark { 0% { transform: rotate(calc(var(--spark) * 22.5deg)) translateY(-30px); opacity: 0; } 12% { opacity: 1; } 100% { transform: rotate(calc(var(--spark) * 22.5deg)) translateY(-350px) scaleY(.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reveal-shockwave, .reveal-sparks { display: none; } }

.is-reveal .create-signature-move { color: inherit; cursor: pointer; }
.is-reveal .create-signature-move[aria-pressed="true"] .create-move-icon { border-color: #b4fff0; box-shadow: 0 0 0 2px #79dcca66; }
.is-reveal .create-signature-move:focus-visible { outline: 2px solid #b4fff0; outline-offset: 5px; }

/* The playable preview reserves its own space above the title. */
.is-reveal .create-hero[data-playable="true"] canvas { height: calc(100% - 145px); }
.is-reveal .create-hero[data-playable="true"] .create-hero-copy { bottom: 12px; left: 3%; right: 3%; }
.is-reveal .create-hero[data-playable="true"] .create-hero-name { font-size: clamp(30px, 3.8vw, 60px); max-width: 100%; margin: 8px 0; }
@media (max-width: 600px) {
  .is-reveal .create-hero[data-playable="true"] canvas { height: calc(100% - 125px); }
  .is-reveal .create-hero[data-playable="true"] .create-hero-name { font-size: 32px; }
}

/* Give the finished fighter the whole screen and keep the roster card in view. */
.create[data-stage='reveal'] .create-top,
.create[data-stage='reveal'] .create-foot { display: none; }
.create[data-stage='reveal'] .create-shell { grid-template-rows: minmax(0, 1fr); gap: 0; }
.is-reveal .create-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse 58% 68% at 50% 47%, #050b18e8 0%, #07101dcc 38%, #07101d55 64%, transparent 82%);
  -webkit-backdrop-filter: blur(7px) brightness(.64);
  backdrop-filter: blur(7px) brightness(.64);
  mask-image: radial-gradient(ellipse 60% 72% at 50% 47%, #000 26%, #000b 55%, transparent 84%);
  pointer-events: none;
}
.is-reveal .create-reveal-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  max-height: none;
  overflow: visible;
}
.is-reveal .create-reveal-body { overflow: visible; }
.roster-confetti {
  position: absolute;
  z-index: 10;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.roster-confetti i {
  position: absolute;
  width: 8px;
  height: 13px;
  border-radius: 1px;
  background: var(--confetti-color);
  box-shadow: 0 0 12px color-mix(in srgb, var(--confetti-color), transparent 35%);
  opacity: 0;
  animation: roster-confetti 1260ms var(--confetti-delay) cubic-bezier(.16,1,.3,1) both;
}
@keyframes roster-confetti {
  0% { opacity: 0; transform: rotate(0) scale(.55); }
  10% { opacity: 1; transform: rotate(35deg) scale(1); }
  55% { opacity: 1; transform: translate(var(--burst-x), var(--burst-y)) rotate(var(--spin)); }
  100% { opacity: 0; transform: translate(var(--fall-x), var(--fall-y)) rotate(var(--spin)); }
}
@media (min-width: 901px) {
  .create[data-stage='reveal'] .create-shell {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: 2.2vh 2.5vw;
  }
  .create-cols.is-reveal { grid-template-columns: minmax(0, 1fr) clamp(420px, 38vw, 760px); }
  .is-reveal .create-reveal-card { align-self: stretch; height: 100%; }
  .is-reveal .create-reveal-body { overflow-y: auto; min-height: 0; }
}
@media (max-width: 600px) {
  .create[data-stage='reveal'] .create-shell { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .is-reveal .create-reveal-card { animation: screen-arrive 400ms 520ms ease-out backwards; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .is-reveal #reveal-train {
    position: fixed;
    z-index: 20;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: calc(100% - 32px);
    box-shadow: 0 0 0 8px #06101ee8, 0 12px 30px #0008;
  }
}
@media (prefers-reduced-motion: reduce) {
  .roster-confetti i { animation: none; opacity: .9; transform: translate(var(--burst-x), var(--burst-y)) rotate(var(--spin)); }
}