:root {
  --ct-canvas:#09090e;
  --ct-surface:#121119;
  --ct-surface-raised:#191722;
  --ct-line:rgba(255,255,255,.1);
  --ct-line-strong:rgba(255,255,255,.18);
  --ct-text:#f7f5fb;
  --ct-muted:#a7a2b1;
  --ct-subtle:#706b7a;
  --ct-violet:#8173ff;
  --ct-violet-bright:#a297ff;
  --ct-success:#61d6a7;
  --ct-winner:#e7c35a;
  --ct-radius:18px;
  --ct-shadow:0 24px 70px rgba(0,0,0,.38);
}

html { min-height:100%; background:var(--ct-canvas); }
body.wao-challenge-page { min-height:100dvh; color:var(--ct-text); }
.wao-challenge-page .screen { width:min(1180px,calc(100% - 2rem)); max-width:none; min-height:calc(100vh - 72px); padding:clamp(2.5rem,6vw,5rem) 0 5rem; gap:1.25rem; }
.wao-challenge-page .screen-label,.wao-challenge-page .prompt-label,.wao-challenge-page .format-kicker,.wao-challenge-page .results-prompt-label { color:var(--ct-violet-bright); font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.wao-challenge-page .section-heading { max-width:760px; color:var(--ct-text); font-size:clamp(2rem,5vw,3.4rem); line-height:1; letter-spacing:-.05em; }
.wao-challenge-page .section-sub { max-width:760px; color:var(--ct-muted); font-size:clamp(1rem,2vw,1.2rem); line-height:1.55; }
.wao-challenge-page .btn-primary,.wao-challenge-page .btn-start-vote,.wao-challenge-page .btn-copy-invite-primary { min-height:50px; border-radius:12px; padding:.85rem 1.25rem; background:linear-gradient(135deg,#897cff,#6252e8); box-shadow:0 12px 34px rgba(98,82,232,.25); font-weight:800; }
.wao-challenge-page .btn-secondary { min-height:50px; border:1px solid var(--ct-line-strong); border-radius:12px; padding:.85rem 1.25rem; color:var(--ct-text); background:rgba(255,255,255,.04); font:inherit; font-weight:750; cursor:pointer; }
.wao-challenge-page button:focus-visible,.wao-challenge-page a:focus-visible,.wao-challenge-page textarea:focus-visible,.wao-challenge-page input:focus-visible { outline:3px solid rgba(162,151,255,.55); outline-offset:3px; }

/* Prompt: the challenge is the headline, not another card under a slogan. */
#screen-prompt { max-width:820px; align-items:stretch; }
#screen-prompt .hero-block { display:none; }
#screen-prompt .format-identity { order:1; align-self:flex-start; margin:0; padding:0; border:0; background:none; text-align:left; }
#screen-prompt .prompt-card { order:2; padding:0; border:0; background:none; box-shadow:none; text-align:left; }
#screen-prompt .prompt-label { margin-bottom:.75rem; }
#screen-prompt .prompt-text { color:var(--ct-text); font-size:clamp(2.35rem,7vw,5.2rem); font-weight:850; line-height:.98; letter-spacing:-.06em; }
#screen-prompt .answer-guidance { order:3; max-width:680px; margin:.25rem 0; border:0; padding:0; color:var(--ct-muted); background:none; text-align:left; }
#screen-prompt .answer-input { order:4; min-height:148px; margin-top:1rem; border:1px solid var(--ct-line-strong); border-radius:16px; padding:1.2rem; color:var(--ct-text); background:rgba(18,17,25,.82); box-shadow:inset 0 1px rgba(255,255,255,.025); font-size:clamp(1.05rem,2vw,1.25rem); line-height:1.5; resize:vertical; }
#screen-prompt #btn-submit-answer { order:5; align-self:flex-end; width:auto; min-width:230px; }
#screen-prompt #prompt-error { order:6; }
#screen-prompt .how-it-works { order:7; justify-content:flex-start; border-top:1px solid var(--ct-line); padding-top:1.25rem; color:var(--ct-subtle); }

/* Onboarding: one focused task per step. */
.auth-overlay { padding:1rem; background:rgba(5,5,9,.82); backdrop-filter:blur(14px); }
.auth-box { width:min(680px,100%); max-height:min(86vh,820px); overflow:auto; border:1px solid var(--ct-line-strong); border-radius:22px; padding:clamp(1.25rem,4vw,2rem); background:linear-gradient(145deg,rgba(25,23,34,.99),rgba(13,13,19,.99)); box-shadow:var(--ct-shadow); }
.auth-title { font-size:clamp(1.7rem,5vw,2.4rem); letter-spacing:-.04em; }
.auth-subtitle { margin:.45rem 0 1.35rem; color:var(--ct-muted); }
.auth-input { min-height:52px; border:1px solid var(--ct-line-strong); background:rgba(6,6,10,.62); }
.avatar-grid { max-height:min(48vh,430px); grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:.7rem; padding:.2rem; background:none; }
.avatar-card { border-color:var(--ct-line); border-radius:14px; background:rgba(255,255,255,.035); }
.avatar-card:hover,.avatar-card:focus-visible { transform:translateY(-3px); background:rgba(129,115,255,.08); }
.avatar-card.selected { background:rgba(129,115,255,.13); }
.auth-success-title { color:var(--ct-text); }
.auth-step-error { margin-top:.5rem; }
.auth-step-action { margin-top:1rem; }

/* Generation: reserved, informative, and directly connected to the answer. */
#screen-generating { max-width:820px; justify-content:center; }
.generation-card { width:min(680px,100%); border:1px solid var(--ct-line); border-radius:22px; background:linear-gradient(145deg,var(--ct-surface-raised),var(--ct-surface)); box-shadow:var(--ct-shadow); }
.generation-orbit { color:var(--ct-violet-bright); }
.generating-kicker { color:var(--ct-violet-bright); }
.generating-answer { font-size:clamp(1.6rem,5vw,2.5rem); letter-spacing:-.04em; }
.generation-progress-track { background:rgba(255,255,255,.08); }
.generation-progress-bar { background:linear-gradient(90deg,var(--ct-violet),#b4abff); }

/* Waiting: submission proof, then progress and useful actions. */
#screen-waiting { grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; column-gap:clamp(1.25rem,3vw,2.5rem); row-gap:clamp(.65rem,1.5vw,1.1rem); }
#screen-waiting.active { display:grid; }
#screen-waiting > .screen-label { grid-column:1/4; grid-row:1; align-self:end; text-align:left; justify-self:stretch; }
#screen-waiting > .prompt-card { grid-column:8/-1; grid-row:1/span 2; align-self:end; text-align:left; justify-self:stretch; }
#screen-waiting > .waiting-headline { grid-column:1/8; grid-row:2; text-align:left; justify-self:stretch; }
#screen-waiting > .waiting-subhead { grid-column:8/-1; grid-row:3; align-self:start; text-align:left; justify-self:stretch; }
#screen-waiting .waiting-headline { margin:0; color:var(--ct-text); font-size:clamp(2.2rem,6vw,4.3rem); letter-spacing:-.055em; }
#screen-waiting .waiting-subhead { margin:0; color:var(--ct-muted); }
#screen-waiting .prompt-card { margin:0; border:0; padding:0; background:none; box-shadow:none; }
#screen-waiting .prompt-text { color:var(--ct-muted); font-size:1rem; }
#waiting-image { grid-column:1/8; grid-row:3/span 9; width:100%; max-width:none; border:1px solid var(--ct-line); border-radius:18px; box-shadow:var(--ct-shadow); }
#waiting-answer,#contest-ready-banner,#btn-copy-invite-primary,#btn-reveal-ready,#screen-waiting .invite-box,#screen-waiting .entry-counter,#waiting-status { grid-column:8/-1; width:100%; }
.waiting-answer { border:0; border-left:3px solid var(--ct-violet); border-radius:0; padding:.25rem 0 .25rem 1rem; background:none; text-align:left; }
.contest-ready-banner,.invite-box,.voted-state-box { border:1px solid var(--ct-line); border-radius:16px; background:rgba(255,255,255,.035); box-shadow:none; }
#btn-reveal-ready[aria-pressed="true"] { border:1px solid rgba(97,214,167,.42); background:rgba(97,214,167,.12); box-shadow:none; color:var(--ct-text); }
.invite-link-row { gap:.65rem; }
.invite-link-text { border:1px solid var(--ct-line); background:rgba(5,5,9,.5); }
.invite-privacy-note { color:rgba(240,240,245,.4); font-size:.82rem; }
.entry-counter { color:var(--ct-muted); text-align:left; }
.notify-card { grid-column:8/-1; display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; border-top:1px solid var(--ct-line); padding-top:1rem; color:var(--ct-muted); font-size:.9rem; line-height:1.45; }
.notify-card strong { color:var(--ct-text); }
.notify-card .btn-secondary { flex:0 0 auto; min-height:42px; padding:.6rem .85rem; }

/* Voting: artwork-first, stable cards, violet selection. */
#screen-voting { grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; column-gap:clamp(1.25rem,3vw,2.5rem); row-gap:clamp(.8rem,1.5vw,1.15rem); }
#screen-voting.active { display:grid; }
.voting-masthead { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:.85rem clamp(1rem,2vw,1.4rem); }
.voting-context { grid-column:1; display:flex; align-items:baseline; gap:.55rem; min-width:0; }
#screen-voting .screen-label { flex:0 0 auto; margin:0; text-align:left; }
#screen-voting .screen-label::after { content:"·"; margin-left:.55rem; color:var(--ct-muted); }
#screen-voting .format-identity { display:flex; flex:1 1 auto; align-items:baseline; min-width:0; margin:0; padding:0; border:0; background:none; text-align:left; }
#screen-voting .format-kicker { display:none; }
#screen-voting .format-name { overflow:hidden; color:var(--ct-text); font-size:.82rem; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
#screen-voting .prompt-card { grid-column:2/-1; margin:0; text-align:left; }
#screen-voting .prompt-label { margin-bottom:.35rem; }
#screen-voting .section-heading { grid-column:1/3; max-width:none; margin:.35rem 0 0; text-align:left; }
.voting-status { grid-column:3; align-self:end; display:grid; gap:.5rem; min-width:0; padding:0 0 .25rem; }
#screen-voting .section-sub { margin:0; text-align:left; }
.round-activity { width:100%; margin:0; color:var(--ct-text); font-size:.92rem; font-weight:700; line-height:1.35; text-align:left; }
#screen-voting .prompt-card { border:0; padding:0; background:none; box-shadow:none; }
#screen-voting .prompt-text { color:var(--ct-muted); font-size:1.05rem; }
.entries-grid { grid-column:1/-1; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.4rem); }
.entry-card { overflow:hidden; border:1px solid var(--ct-line); border-radius:16px; background:rgba(255,255,255,.035); box-shadow:none; transition:border-color .18s,background .18s,transform .18s; }
.entry-card:hover { transform:translateY(-2px); border-color:var(--ct-line-strong); }
.entry-card.selected-vote { border-color:var(--ct-violet-bright); background:rgba(129,115,255,.09); box-shadow:0 0 0 2px rgba(129,115,255,.16); }
.entry-image-wrap { aspect-ratio:1; }
.entry-card-body { min-height:92px; }
#btn-cast-vote { grid-column:5/9; position:sticky; bottom:1rem; z-index:20; align-self:center; width:100%; box-shadow:0 14px 42px rgba(0,0,0,.45),0 10px 34px rgba(98,82,232,.3); }
.voted-state-box { grid-column:4/10; width:100%; margin:auto; }
.voted-state-detail { color:rgba(240,240,245,.35); font-size:.8rem; }
#voting-error { grid-column:1/-1; }

/* Results: winning artwork as the page anchor, editorial rail, compact standings. */
#screen-results { grid-template-columns:minmax(0,1.65fr) minmax(290px,.75fr); align-items:start; gap:1.2rem clamp(2rem,5vw,4rem); }
#screen-results.active { display:grid; }
#screen-results > .screen-label { grid-column:1/-1; justify-self:start; }
#screen-results > .results-prompt-label,#screen-results > #results-prompt-text { grid-column:2; }
#screen-results > .results-prompt-label { grid-row:2; align-self:end; }
#screen-results > #results-prompt-text { grid-row:3; align-self:start; color:var(--ct-muted); text-align:left; }
#screen-results > .results-list { display:contents; }
.standings-list { grid-column:1/-1; display:flex; flex-direction:column; }
.result-card.rank-1 { display:contents; animation:none!important; }
.result-card.rank-1::before { content:none; }
.result-card.rank-1 .result-image-open { grid-column:1; grid-row:2/span 6; align-self:start; width:100%; max-width:none; border:1px solid var(--ct-line); border-radius:18px; box-shadow:var(--ct-shadow); animation:none!important; }
.result-card.rank-1 .winner-identity { grid-column:2; grid-row:4; justify-content:flex-start; margin:1.25rem 0 .6rem; animation:none!important; }
.winner-avatar { width:60px; border:1px solid rgba(231,195,90,.7); box-shadow:none; }
.winner-kicker { color:var(--ct-winner); }
.winner-name { font-size:clamp(1.8rem,4vw,2.6rem); }
.result-card.rank-1 .result-info { grid-column:2; grid-row:5; align-items:flex-start; text-align:left; animation:none!important; }
.result-card.rank-1 .result-prompt-inline,.result-card.rank-1 .result-player,.result-card.rank-1 .wao-winner-brand { display:none; }
.result-card.rank-1 .result-answer { margin:0; color:var(--ct-text); font-size:clamp(1.2rem,2.5vw,1.6rem); line-height:1.35; }
.result-card.rank-1 .result-votes { margin-top:.3rem; color:var(--ct-muted); }
.result-card.rank-1 .result-rank { display:none; }
#results-actions { grid-column:2; grid-row:6; display:flex; flex-wrap:wrap; gap:.75rem; align-self:start; }
#results-actions[hidden] { display:none; }
#results-actions button { flex:1 1 130px; width:auto; }
.result-card:not(.rank-1) { grid-column:1/-1; display:grid; grid-template-columns:42px 84px minmax(0,1fr); align-items:center; min-height:108px; border:0; border-top:1px solid var(--ct-line); border-radius:0; padding:.85rem 0; background:none; }
.standings-list .result-card:first-child { margin-top:0; }
.result-card:not(.rank-1) .result-image-open { width:76px; }
.result-card:not(.rank-1) .result-info { display:grid; grid-template-columns:minmax(0,1fr) minmax(110px,.35fr) auto; align-items:center; gap:1rem; }
.result-card:not(.rank-1) .result-answer { margin:0; }
.result-card:not(.rank-1) .result-player { color:var(--ct-muted); }
.result-card:not(.rank-1) .result-votes { white-space:nowrap; }
.standings-heading { grid-column:1/-1; margin:2.5rem 0 -.2rem; color:var(--ct-text); font-size:clamp(1.35rem,3vw,1.8rem); letter-spacing:-.035em; }
.standings-heading[hidden] { display:none; }
.results-loading-card { grid-column:1/-1; min-height:620px; border-color:var(--ct-line); background:var(--ct-surface); }
#screen-results > .results-list.has-tie { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.results-list.has-tie .result-card.rank-1 { display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--ct-line); border-radius:18px; padding:1.1rem; background:var(--ct-surface); box-shadow:var(--ct-shadow); }
.results-list.has-tie .result-card.rank-1 .winner-identity { order:1; margin:.1rem 0 1rem; }
.results-list.has-tie .result-card.rank-1 .result-image-open { order:2; width:100%; border:0; border-radius:13px; box-shadow:none; }
.results-list.has-tie .result-card.rank-1 .result-info { order:3; align-items:flex-start; padding:.9rem .15rem .15rem; text-align:left; }
.results-list.has-tie .winner-name { font-size:clamp(1.55rem,3vw,2.2rem); }
#screen-results.is-tie > .results-prompt-label,#screen-results.is-tie > #results-prompt-text,#screen-results.is-tie > #results-actions { grid-column:1/-1; grid-row:auto; }
#screen-results.is-tie > #results-actions { justify-self:end; width:min(420px,100%); }

@media (max-width:900px) {
  .entries-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #screen-waiting { grid-template-columns:1fr; }
  #screen-waiting > .screen-label,#screen-waiting > .waiting-headline,#screen-waiting > .waiting-subhead,#screen-waiting > .prompt-card,#waiting-image,#waiting-answer,#contest-ready-banner,#btn-copy-invite-primary,#btn-reveal-ready,#screen-waiting .invite-box,#screen-waiting .entry-counter,#waiting-status,.notify-card { grid-column:1; grid-row:auto; }
  #screen-voting { display:none; grid-template-columns:1fr; }
  #screen-voting.active { display:grid; }
  .voting-masthead { grid-column:1; grid-template-columns:1fr; gap:.55rem; }
  .voting-context,#screen-voting .prompt-card,#screen-voting .section-heading,.voting-status { grid-column:1; grid-row:auto; }
  .voting-context { align-items:baseline; gap:.65rem; }
  #screen-voting .format-identity { align-items:baseline; gap:.45rem; }
  #screen-voting .format-name { font-size:.82rem; }
  #screen-voting .prompt-label { display:none; }
  #screen-voting .prompt-text { line-height:1.35; }
  #screen-voting .section-heading { margin:.2rem 0 0; }
  .voting-status { gap:.35rem; padding:0; }
  #screen-voting .screen-label,#screen-voting .format-identity,#screen-voting .prompt-card,#screen-voting .section-heading,#screen-voting .section-sub,.round-activity { text-align:left; }
  .entries-grid,#btn-cast-vote,.voted-state-box,#voting-error { grid-column:1; grid-row:auto; }
  #screen-results { grid-template-columns:1fr; }
  #screen-results > .screen-label,#screen-results > .results-prompt-label,#screen-results > #results-prompt-text,#results-actions { grid-column:1; grid-row:auto; }
  #screen-results > .results-prompt-label { margin-top:.5rem; }
  #screen-results > .results-list { display:block; grid-column:1; }
  .result-card.rank-1 { display:flex; flex-direction:column; }
  .result-card.rank-1 .result-image-open,.result-card.rank-1 .winner-identity,.result-card.rank-1 .result-info { grid-column:auto; grid-row:auto; }
  .standings-list { grid-column:1; }
  .result-card.rank-1 .result-image-open { order:1; }
  .result-card.rank-1 .winner-identity { order:2; }
  .result-card.rank-1 .result-info { order:3; }
}

@media (min-width:901px) and (max-height:899px) {
  .wao-challenge-page .screen { padding-top:clamp(1.35rem,3vh,2.25rem); }
  #screen-voting,#screen-waiting { row-gap:.65rem; }
  #screen-voting .section-heading { font-size:clamp(2rem,4.2vw,3.35rem); }
}

@media (min-width:901px) and (max-height:699px) {
  .wao-challenge-page .screen { padding-top:1rem; }
  #screen-prompt { gap:.75rem; padding-bottom:1.5rem; }
  #screen-prompt .answer-guidance { margin:0; line-height:1.35; }
  #screen-prompt .answer-input { min-height:108px; margin-top:.35rem; padding:1rem 1.1rem; }
  #screen-prompt .how-it-works { display:none; }
  #screen-voting .format-name,#screen-voting .prompt-text { font-size:.9rem; }
  #screen-voting .section-heading { font-size:clamp(2rem,3.8vw,3rem); }
}

@media (max-width:640px) {
  .wao-challenge-page .screen { width:min(100% - 1.25rem,1180px); padding:2rem 0 6rem; }
  #screen-prompt .prompt-text { font-size:clamp(2.2rem,12vw,3.5rem); }
  #screen-prompt #btn-submit-answer { width:100%; }
  #screen-prompt .how-it-works { display:none; }
  .auth-overlay { align-items:flex-end; padding:0; }
  .auth-box { width:100%; max-height:94dvh; border-radius:22px 22px 0 0; padding:1.2rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .avatar-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .entries-grid { grid-template-columns:1fr; }
  .voting-masthead { gap:.45rem; }
  #screen-voting .prompt-text { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:.88rem; }
  #screen-voting .section-sub { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  #screen-voting .section-heading { font-size:clamp(2rem,10vw,3rem); line-height:.98; }
  #screen-voting .round-activity { font-size:.9rem; line-height:1.35; }
  #screen-results > .results-list.has-tie { grid-template-columns:1fr; }
  .entry-card-body { min-height:0; }
  .result-card:not(.rank-1) { grid-template-columns:34px 68px minmax(0,1fr); }
  .result-card:not(.rank-1) .result-image-open { width:64px; }
  .result-card:not(.rank-1) .result-info { display:block; }
  .result-card:not(.rank-1) .result-player,.result-card:not(.rank-1) .result-votes { display:inline; margin-right:.55rem; }
  #results-actions { position:sticky; bottom:.75rem; z-index:20; padding:.65rem; border:1px solid var(--ct-line); border-radius:15px; background:rgba(13,12,18,.9); backdrop-filter:blur(12px); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}