.page { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
@media (max-width: 960px) { .page { grid-template-columns: minmax(0, 1fr); } }

/* ---------- stage ---------- */
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  padding: 30px clamp(20px, 4vw, 48px) 40px; overflow: hidden; border-right: 1px solid var(--line); isolation: isolate; }
.stage-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; opacity: .32; filter: saturate(1.1); transform: scale(1.08); animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.16) translate(-2%, -1%); } }
.stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 45%, rgba(234, 92, 255, .14), transparent 70%), linear-gradient(to bottom, rgba(11,9,17,.6), rgba(11,9,17,.25) 30%, rgba(11,9,17,.9)); }
.stage .fx { z-index: 0; }
.stage > :not(.stage-bg):not(.fx) { position: relative; z-index: 1; }
@media (max-width: 960px) { .stage { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 16px 30px; } }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.bar .logo { font-size: 26px; }

.altar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; justify-items: center; gap: 10px; margin: 0 auto 58px; width: min(520px, 100%); }
.relic { position: relative; width: clamp(150px, min(24vw, 30vh), 280px); aspect-ratio: 1; animation: float 5s ease-in-out infinite; }
.relic img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px rgba(234, 92, 255, .5), 0 0 70px rgba(234, 92, 255, .35); }
.relic::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -30px; height: 18px; background: radial-gradient(closest-side, rgba(234, 92, 255, .45), transparent); filter: blur(4px); animation: shadow 5s ease-in-out infinite; }
.relic .eyes { position: absolute; top: 34%; left: 34%; width: 34%; height: 8%; background: radial-gradient(circle at 18% 50%, #8dff7a 0 4%, transparent 14%), radial-gradient(circle at 78% 50%, #8dff7a 0 4%, transparent 14%); filter: blur(5px); mix-blend-mode: screen; animation: pulse 2.2s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px); } }
@keyframes shadow { 50% { transform: scaleX(.8); opacity: .6; } }
@keyframes pulse { 50% { opacity: .4; } }

/* pixel torches: a stick and a flame that flickers in steps */
.torch { position: relative; width: 14px; height: 80px; margin-bottom: 30px; background: linear-gradient(90deg, #3a2517 0 50%, #2a1a10 50%); }
.torch::before { content: ""; position: absolute; left: -4px; top: 0; width: 22px; height: 8px; background: #5b3a22; }
.torch i { position: absolute; left: 50%; bottom: 100%; width: 22px; height: 30px; transform: translateX(-50%);
  background:
    linear-gradient(#ffe9a8, #ffe9a8) 8px 14px / 6px 12px no-repeat,
    linear-gradient(#ffcf6b, #ffcf6b) 4px 8px / 14px 18px no-repeat,
    linear-gradient(#ff8a3d, #ff8a3d) 2px 4px / 18px 24px no-repeat,
    linear-gradient(#ff5a2a, #ff5a2a) 8px 0 / 6px 8px no-repeat;
  filter: drop-shadow(0 0 14px rgba(255, 138, 61, .9)); animation: flick .5s steps(3) infinite; transform-origin: 50% 100%; }
.torch.r i { animation-delay: -.23s; }
@keyframes flick { 0% { transform: translateX(-50%) scale(1, 1); } 33% { transform: translateX(-52%) scale(.92, 1.1); } 66% { transform: translateX(-48%) scale(1.06, .94); } }
.torch::after { content: ""; position: absolute; left: 50%; bottom: 60px; width: 180px; height: 180px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(255, 138, 61, .22), transparent); animation: pulse 1.6s ease-in-out infinite; pointer-events: none; }
.plate { position: absolute; bottom: -58px; display: grid; gap: 4px; font-size: 13px; }
.plate b { font-weight: 400; color: var(--bone); }
.plate.lft { left: 0; } .plate.rgt { right: 0; text-align: right; }
@media (max-width: 560px) { .altar { margin-bottom: 0; } .bar .kicker { font-size: 10px; letter-spacing: .14em; } .plate { position: static; font-size: 12px; } .altar { grid-template-columns: auto auto auto; } .plate.lft { grid-column: 1 / 2; } .plate.rgt { grid-column: 3 / 4; } .torch { height: 60px; } }

.stage-copy .hl { margin: 0 0 14px; font: 400 clamp(44px, min(6vw, 8vh), 84px)/.92 var(--display); text-shadow: 0 4px 0 rgba(0,0,0,.5); }
.stage-copy .hl em { font-style: normal; color: var(--pink); text-shadow: 0 0 24px rgba(234, 92, 255, .45); }
.stage-copy p { max-width: 46ch; margin: 0 0 22px; color: var(--bone-dim); }
.supply { display: flex; align-items: baseline; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.supply b { font: 400 46px/1 var(--display); }

/* ---------- side / card ---------- */
.side { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-width: 0; padding: clamp(24px, 5vw, 60px) clamp(16px, 4vw, 48px); }
.card { position: relative; width: min(520px, 100%); padding: 28px clamp(18px, 3vw, 30px) 26px; background: linear-gradient(180deg, rgba(21, 16, 32, .92), rgba(15, 11, 23, .96));
  box-shadow: 0 0 0 1px var(--line-2), 0 40px 90px -40px rgba(234, 92, 255, .35); animation: cardIn .8s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px); } }
.card::before, .card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid var(--pink); pointer-events: none; }
.card::before { left: -6px; top: -6px; border-right: 0; border-bottom: 0; }
.card::after { right: -6px; bottom: -6px; border-left: 0; border-top: 0; }
.card-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-h h2 { margin: 0; font: 400 40px/1 var(--display); }
.card-h h2 em, .big em { font-style: normal; color: var(--pink); }
.formno { font: 500 10px/1.5 var(--pixel); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-mute); text-align: right; }
.rail { position: relative; height: 2px; margin: 18px 0 8px; background: var(--line-2); }
.rail i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--violet), var(--pink)); transition: width .6s var(--ease); }
.rail b { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; transform: translate(-50%, -50%); background: var(--pink); box-shadow: 0 0 12px var(--pink), 0 0 30px var(--pink); transition: left .6s var(--ease); animation: blink 1.4s steps(2) infinite; }

.step { padding: 18px 0 16px; border-bottom: 1px solid var(--line); transition: opacity .4s; }
.step.locked { opacity: .35; pointer-events: none; }
.step-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.step-h .no { font: 500 11px/1 var(--pixel); color: var(--pink); }
.step-h h3 { flex: 1; margin: 0; font: 500 17px/1.2 var(--pixel); }
.req { font: 500 10px/1 var(--pixel); letter-spacing: .18em; text-transform: uppercase; color: var(--bone-mute); }
.req.ok { color: var(--ok); }

.field { display: flex; align-items: stretch; background: rgba(0,0,0,.35); box-shadow: 0 0 0 1px var(--line-2); transition: box-shadow .2s; }
.field:focus-within { box-shadow: 0 0 0 1px var(--pink), 0 0 20px -4px rgba(234, 92, 255, .6); }
.field.bad { box-shadow: 0 0 0 1px var(--bad); animation: shake .35s; }
.field.good { box-shadow: 0 0 0 1px var(--ok); }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.field .pre { display: grid; place-items: center; padding: 0 12px; color: var(--bone-mute); border-right: 1px solid var(--line); }
.field input { flex: 1; min-width: 0; padding: 13px 14px; font: 14px var(--mono); color: var(--bone); background: transparent; border: 0; outline: 0; }
.field input::placeholder { color: var(--bone-mute); }
.mini { padding: 0 16px; font: 600 12px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--pink); background: transparent; border: 0; border-left: 1px solid var(--line); cursor: pointer; transition: background .2s, color .2s; }
.mini:hover { background: rgba(234, 92, 255, .12); }
.mini[disabled] { color: var(--bone-mute); cursor: default; }
.err { min-height: 0; margin: 8px 0 0; font-size: 12px; color: var(--bad); }
.err:empty { margin: 0; }
.err.center { text-align: center; }
.hint { margin: 8px 0 0; font-size: 12px; color: var(--bone-mute); }

.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.task { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 12px; padding: 11px 10px; background: rgba(0,0,0,.2); transition: background .25s; }
.task:hover { background: rgba(164, 107, 255, .08); }
.task .box { width: 18px; height: 18px; box-shadow: inset 0 0 0 2px var(--line-2); position: relative; }
.task.done .box { background: var(--ok); box-shadow: 0 0 12px rgba(123, 240, 168, .6); }
.task.done .box::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--bg); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.task.checking .box { box-shadow: inset 0 0 0 2px var(--pink); animation: blink .5s steps(2) infinite; }
.task .t { font-size: 13px; }
.task .s { font-size: 11px; color: var(--bone-mute); }
.task .go { padding: 7px 12px; font: 600 11px/1 var(--pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); background: transparent; border: 0; box-shadow: 0 0 0 1px var(--line-2); cursor: pointer; text-decoration: none; transition: box-shadow .2s, color .2s; }
.task .go:hover { box-shadow: 0 0 0 1px var(--pink); color: var(--pink); }
.task.done .go { color: var(--ok); box-shadow: none; pointer-events: none; }
.task.checking .go { color: var(--pink); box-shadow: none; pointer-events: none; }
.task .note { grid-column: 2 / 4; font-size: 11px; color: var(--bad); }
.task .note:empty { display: none; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.submit { width: 100%; justify-content: space-between; margin-top: 22px; padding: 17px 20px; font-size: 16px; }
.submit .left { font: 500 11px/1 var(--pixel); letter-spacing: .1em; opacity: .7; }
.submit.go { animation: ready 1.8s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--pink), 6px 6px 0 4px rgba(0,0,0,.6), 0 0 44px rgba(234, 92, 255, .6); } }
.fine { margin: 14px 0 0; font-size: 11px; color: var(--bone-mute); text-align: center; }

/* done + closed */
.big { margin: 10px 0 18px; font: 400 clamp(44px, 5.5vw, 64px)/.95 var(--display); }
.done canvas, .closed canvas { width: 100%; height: auto; box-shadow: 0 0 0 1px var(--line-2); animation: cardIn .9s var(--ease) both; image-rendering: pixelated; }
.realm { margin: 12px 0 0; font-size: 12px; color: var(--bone-dim); }
.row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.row .btn { flex: 1; justify-content: center; }
.muted { color: var(--bone-dim); margin: 0 0 16px; }
.chkOut { margin-top: 16px; padding: 14px 16px; font: 500 16px/1.4 var(--pixel); background: rgba(0,0,0,.3); box-shadow: 0 0 0 1px var(--line); }
.chkOut small { display: block; margin-top: 6px; font: 12px/1.5 var(--mono); color: var(--bone-dim); }
.chkOut.yes { box-shadow: 0 0 0 1px var(--ok); }
#chkPass { margin-top: 16px; }
.follow { width: 100%; justify-content: center; margin-top: 20px; }

.jsErr { width: min(520px, 100%); margin: 0 0 16px; padding: 12px 14px; color: var(--bad); box-shadow: 0 0 0 1px var(--bad); font-size: 12px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 95; transform: translateX(-50%); padding: 11px 16px; font: 500 13px/1 var(--pixel); color: var(--bg); background: var(--bone); box-shadow: 4px 4px 0 rgba(0,0,0,.6); animation: toast 2.2s var(--ease) both; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 12%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* confetti of pixels when the seal is cast */
.burst { position: fixed; inset: 0; z-index: 94; pointer-events: none; }

/* minting machine instead of the art: the collection stays hidden until the reveal */
.machine { position: relative; width: min(100%, 380px, 44vh); aspect-ratio: 810 / 744; margin: 0 auto; overflow: hidden;
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px rgba(164, 107, 255, .45), 0 30px 80px -30px rgba(164, 107, 255, .6); animation: float 6s ease-in-out infinite; }
.machine video, .machine .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (max-width: 960px) { .machine { width: min(100%, 320px); } }

/* one column: the realm fills the whole screen, the form sits in the middle */
.page.solo { display: block; position: relative; min-height: 100vh; min-height: 100dvh; }
.page.solo .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.page.solo .bg .stage-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; z-index: 0; }
.page.solo .bg .fx { position: absolute; inset: 0; z-index: 1; }
.page.solo .bg::after { content: ""; position: absolute; inset: 0; z-index: 2; background: radial-gradient(70% 60% at 50% 50%, rgba(11,9,17,.25), rgba(11,9,17,.85)); }
.page.solo .bar { position: relative; z-index: 3; padding: 22px clamp(16px, 4vw, 44px); }
.page.solo .side { position: relative; z-index: 3; min-height: calc(100vh - 80px); min-height: calc(100dvh - 80px); padding: 12px 16px 48px; }