/* AI features: cook modal, cooked-game cards, remix CTAs — plus new-site bits
(waitlist signup, how-step numbers, screenshot thumbnails). */

/* ---------- waitlist ---------- */

.waitlist-label {
font-weight: 800;
font-size: 15px;
color: var(--soft);
margin-bottom: 14px;
}

.waitlist-form {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}

.waitlist-form input {
width: min(340px, 80vw);
font-family: 'Nunito', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--ink);
background: var(--wh);
border: var(--bw) solid var(--ink);
border-radius: 100px;
padding: 13px 22px;
outline: none;
box-shadow: var(--sh);
}
.waitlist-form input:focus { border-color: var(--pk); }

.waitlist-form button {
font-family: 'Space Grotesk', sans-serif;
font-size: 16px;
color: var(--ink);
background: var(--mt);
border: var(--bw) solid var(--ink);
border-radius: 100px;
padding: 13px 28px;
box-shadow: var(--sh);
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
.waitlist-form button:hover { transform: translate(-2px, -2px); box-shadow: var(--shb); }

.waitlist-note {
margin-top: 12px;
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 12px;
color: var(--soft);
}

/* ---------- screenshot thumbnails ---------- */

.gthumb.shot { background: #0d0d16; overflow: hidden; }

.gthumb.shot img,
.gthumb.shot .gthumb-video-wrap {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}

.gthumb-video-wrap {
overflow: hidden;
}

/* crop lives on a wrapper — iOS Safari often paints a blank frame when transform is on <video> */
.gthumb-video-crop {
position: absolute;
top: 0;
left: 50%;
width: 131.58%;
height: 100%;
transform: translateX(-50%);
}

.gthumb.shot video.gthumb-video {
position: relative;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #0d0d16;
pointer-events: none;
}

.gbadge.hot {
background: var(--y);
font-family: 'Space Grotesk', sans-serif;
font-size: 11px;
z-index: 3;
}

.gthumb-fallback {
font-family: 'Space Grotesk', sans-serif;
font-size: 26px;
color: var(--wh);
text-shadow: 3px 3px 0 var(--ink);
padding: 0 18px;
text-align: center;
z-index: 1;
}

/* ---------- nav: account state ---------- */

.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.nav-signin {
font-family: 'Space Grotesk', sans-serif;
font-size: 14px;
color: var(--ink);
background: var(--wh);
border: var(--bw) solid var(--ink);
border-radius: 100px;
padding: 8px 18px;
box-shadow: 3px 3px 0 var(--ink);
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
}
.nav-signin:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

.nav-user {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 13px;
color: var(--wh);
background: var(--ink);
border-radius: 100px;
padding: 5px 13px 5px 5px;
text-decoration: none;
transition: transform .12s ease;
}
.nav-user:hover { transform: translateY(-1px); }
.nav-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
object-fit: cover;
background: var(--ink);
border: 2px solid var(--wh);
display: inline-grid;
place-items: center;
font-size: 12px;
color: var(--y);
flex: none;
}
.nav-avatar-fallback { font-family: 'Space Grotesk', sans-serif; }

/* sign out lives in the nav drawer / menu — not the top bar */
.nav-signout { display: none !important; }

#nav-auth { display: flex; align-items: center; gap: 8px; }

/* ---------- auth modal ---------- */
/* Auth modal styles moved to css/auth.css (shared by index, profile & studio). */

/* ---------- cook modal ---------- */

.cook-modal {
position: fixed;
inset: 0;
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
background: rgba(26, 26, 46, 0.72);
backdrop-filter: blur(4px);
padding: 20px;
}
.cook-modal.hidden { display: none; }

.cook-card {
width: min(860px, 100%);
background: var(--cr);
border: var(--bw) solid var(--ink);
border-radius: var(--r);
box-shadow: 10px 10px 0 var(--ink);
display: flex;
flex-direction: column;
overflow: hidden;
}

.cook-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: var(--y);
border-bottom: var(--bw) solid var(--ink);
}

.cook-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 19px;
color: var(--ink);
}

.cook-close {
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 15px;
width: 34px;
height: 34px;
background: var(--wh);
border: var(--bw) solid var(--ink);
border-radius: 100px;
cursor: pointer;
box-shadow: 3px 3px 0 var(--ink);
}
.cook-close:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

.cook-steps {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
padding: 12px 18px;
font-family: 'Space Mono', monospace;
font-size: 12.5px;
font-weight: 700;
color: var(--soft);
}
.cook-step { opacity: .4; }
.cook-step.active { opacity: 1; color: var(--ink); animation: cookPulse 1.1s ease-in-out infinite; }
.cook-step.done { opacity: 1; color: var(--green); }
.cook-arrow { opacity: .4; }

@keyframes cookPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}

.cook-code {
height: min(46vh, 420px);
margin: 0 18px;
padding: 14px;
background: #0d0d16;
color: #3dffb0;
border: var(--bw) solid var(--ink);
border-radius: 12px;
font-family: 'Space Mono', monospace;
font-size: 11.5px;
line-height: 1.55;
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}

.cook-foot {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 14px 18px;
}

.cook-status {
font-family: 'Space Mono', monospace;
font-size: 12.5px;
font-weight: 700;
color: var(--soft);
}

.cook-actions { display: flex; gap: 10px; }
.cook-actions.hidden { display: none; }

.cook-play,
.cook-stay {
font-family: 'Space Grotesk', sans-serif;
font-size: 15px;
padding: 10px 22px;
border: var(--bw) solid var(--ink);
border-radius: 100px;
cursor: pointer;
box-shadow: var(--sh);
text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease;
}
.cook-play { background: var(--pk); color: var(--wh); }
.cook-stay { background: var(--wh); color: var(--ink); }
.cook-play:hover, .cook-stay:hover { transform: translate(-2px, -2px); box-shadow: var(--shb); }

/* ---------- cooked cards in the grid ---------- */

.gcard.cooked .gdel {
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
width: 28px;
height: 28px;
font-family: 'Space Mono', monospace;
font-weight: 700;
font-size: 13px;
background: var(--wh);
border: 2.5px solid var(--ink);
border-radius: 100px;
cursor: pointer;
opacity: 0;
transition: opacity .15s ease;
}
.gcard.cooked:hover .gdel { opacity: 1; }
.gcard.cooked .gdel:hover { background: var(--red); color: var(--wh); }

.gcard.fresh-pop {
animation: freshPop 1.3s ease 2;
outline: 4px solid var(--mt);
outline-offset: 3px;
}

@keyframes freshPop {
0%, 100% { transform: rotate(0); }
20% { transform: rotate(-1.2deg) scale(1.02); }
60% { transform: rotate(1.2deg) scale(1.02); }
}

.gcta-row { display: flex; gap: 8px; }
.gcta-row .gcta { flex: 1; text-align: center; }
.gcta.remix { background: var(--bl); color: var(--ink); }