/* Challenge — inherits the Qnep design tokens rather than forking a design. */

:root{
  --paper:#FFFDF7; --bg:#F3EFE5; --surface:#EDE7D9;
  --ink:#14171C; --ink-mid:#384049; --muted:#6E7681;
  --navy:#1F3A5F; --navy-dark:#16293F; --red:#B23A2E; --gold:#D99A2B;
  --rule:#DDD5C4;

  /* Meter states. "Not yet" must feel encouraging, not like an error — so the
     neutral state is the site's own navy, and only a real violation is warm. */
  --state-neutral:#1F3A5F;
  --state-warn:#B57A16;
  --state-win:#2C6E49;
  --state-win-bg:#EAF3ED;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(to bottom, transparent 0 31px, rgba(31,58,95,.045) 31px 32px);
}
.shell{position:relative; z-index:1; max-width:44em; margin:0 auto; padding:0 1.25rem 5rem}

.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;
}

/* ── Masthead ───────────────────────────────────────────────────────────── */

header.masthead{
  text-align:center; padding:3.5rem 0 1rem;
  border-bottom:3px double var(--navy); margin-bottom:2.5rem;
}
.eyebrow{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--navy); border:1px dashed var(--navy);
  border-radius:.25em; padding:.4em .9em; transform:rotate(-1.2deg); margin-bottom:1.4rem;
}
h1{
  font-family:"Libre Baskerville",Georgia,serif; font-weight:700;
  font-size:clamp(2rem,6vw,3.1rem); line-height:1.12; margin:0 0 .5rem; color:var(--navy);
}
.deck{
  font-family:"Libre Baskerville",Georgia,serif; font-style:italic;
  font-size:clamp(1rem,2.4vw,1.15rem); color:var(--ink-mid);
  max-width:32em; margin:0 auto 2rem;
}

h2{
  font-family:"Libre Baskerville",Georgia,serif; font-size:1.35rem; color:var(--navy);
  margin:3rem 0 .6rem;
}
p{margin:0 0 1rem; color:var(--ink-mid)}
a{color:var(--navy)}

/* ── Prompt and rule cards ──────────────────────────────────────────────── */

.card{
  background:var(--paper); border:1px solid var(--rule); border-radius:.35em;
  padding:1.3rem 1.5rem 1.2rem; position:relative; overflow:hidden;
  margin-bottom:1rem;
  box-shadow:0 1px 2px rgba(20,23,28,.05),0 12px 30px -18px rgba(20,23,28,.25);
}
.card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:8px}
.card--prompt::before{background:var(--gold)}
.card--rule::before{background:var(--red)}

.card__label{
  font-family:Inter,sans-serif; font-size:.68rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  margin:0 0 .5rem;
}

.prompt{
  font-family:"Libre Baskerville",Georgia,serif; font-size:1.12rem; line-height:1.6;
  color:var(--ink); margin:0;
}
.rule{
  font-family:"Courier Prime",monospace; font-size:1.02rem; font-weight:700;
  color:var(--red); margin:0;
}

.link-btn{
  background:none; border:none; padding:0; margin-top:.6rem;
  font-family:Inter,sans-serif; font-size:.82rem; font-weight:600;
  color:var(--navy); text-decoration:underline; text-underline-offset:.2em; cursor:pointer;
}
.link-btn:hover{color:var(--navy-dark)}

/* ── The writing box ────────────────────────────────────────────────────── */

.writing{margin-top:1.6rem}

textarea{
  width:100%; display:block; resize:vertical; min-height:14em;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--rule); border-radius:.35em .35em 0 0; border-bottom:none;
  padding:1.2rem 1.3rem;
  font-family:"Courier Prime",monospace; font-size:1rem; line-height:1.8;
}
textarea::placeholder{color:var(--muted); font-family:"Libre Baskerville",Georgia,serif; font-style:italic}
textarea:focus{outline:2px solid var(--navy); outline-offset:-2px}

/* ── The meter ──────────────────────────────────────────────────────────── */

.meter{
  border:1px solid var(--rule); border-radius:0 0 .35em .35em;
  background:var(--surface); padding:0;
  transition:background .25s;
}
.meter__bar{height:4px; background:rgba(31,58,95,.12); overflow:hidden}
.meter__bar span{
  display:block; height:100%; width:0;
  background:var(--state-neutral);
  transition:width .18s ease-out, background .25s;
}
.meter__text{
  margin:0; padding:.7rem 1.3rem;
  font-family:"Courier Prime",monospace; font-size:.88rem; line-height:1.5;
  color:var(--state-neutral); min-height:2.9em;
}

.meter[data-state="warn"] .meter__bar span{background:var(--state-warn)}
.meter[data-state="warn"] .meter__text{color:var(--state-warn)}

.meter[data-state="win"]{background:var(--state-win-bg)}
.meter[data-state="win"] .meter__bar span{background:var(--state-win); width:100%}
.meter[data-state="win"] .meter__text{color:var(--state-win); font-weight:700}

.meter__violations{display:block; margin-top:.15rem; font-weight:400; opacity:.9}
.meter__won{
  display:inline-block; margin-right:.5em; letter-spacing:.12em;
  text-transform:uppercase; font-size:.74rem;
}

/* The celebration: a single quiet pulse, not confetti. */
.meter[data-state="win"]{animation:solved .5s ease-out}
@keyframes solved{
  0%{transform:scale(1)}
  35%{transform:scale(1.012)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .meter[data-state="win"]{animation:none}
  .meter__bar span{transition:none}
}

/* ── Actions ────────────────────────────────────────────────────────────── */

.actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem}
.btn{
  font-family:Inter,sans-serif; font-weight:700; font-size:.85rem; letter-spacing:.04em;
  color:var(--navy); background:var(--paper);
  border:1px solid var(--rule); border-radius:.3em;
  padding:.75em 1.35em; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover{background:var(--surface); border-color:var(--navy)}
.btn:focus-visible{outline:2px solid var(--navy); outline-offset:2px}
.btn--primary{
  color:var(--paper); background:var(--navy); border-color:var(--navy);
}
.btn--primary:hover{background:var(--navy-dark); border-color:var(--navy-dark)}

/* When the round is solved, "New round" is where the eye should go. */
.actions[data-solved="true"] .btn--primary{
  background:var(--state-win); border-color:var(--state-win);
  transform:translateY(-1px);
  box-shadow:0 6px 18px -8px rgba(44,110,73,.7);
}
@media (prefers-reduced-motion:reduce){
  .actions[data-solved="true"] .btn--primary{transform:none}
}

.fineprint{
  margin-top:1.4rem; font-size:.8rem; line-height:1.6; color:var(--muted);
  max-width:38em;
}

/* ── Explainer cards ────────────────────────────────────────────────────── */

.cards{display:grid; gap:1rem; grid-template-columns:1fr; margin-top:1.25rem}
@media(min-width:640px){.cards{grid-template-columns:repeat(3,1fr)}}
.mini{
  background:var(--paper); border:1px solid var(--rule); border-radius:.35em;
  padding:1.1rem 1.2rem; position:relative; overflow:hidden;
}
.mini::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--gold)}
.mini h3{
  margin:0 0 .35rem; font-family:"Libre Baskerville",Georgia,serif;
  font-size:1rem; color:var(--navy);
}
.mini p{margin:0; font-size:.9rem; color:var(--muted)}

footer{
  margin-top:4rem; padding-top:1.5rem; border-top:1px solid var(--rule);
  font-size:.82rem; color:var(--muted); text-align:center;
}
footer strong{
  display:block; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--navy); font-size:.7rem; margin-bottom:.5rem;
}
/* The variant word is swapped on load by /byline.js; the HTML ships a working
   default, so a missing script leaves a correct sentence rather than a gap. */
footer .byline{display:block; margin-top:.55rem; font-size:.78rem; opacity:.8}

/* ── Cheat sheet modal ──────────────────────────────────────────────────── */

.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:1.25rem}
.modal[hidden]{display:none}
.modal__backdrop{position:absolute; inset:0; background:rgba(20,23,28,.55)}
.modal__panel{
  position:relative; background:var(--paper); border:1px solid var(--rule);
  border-radius:.4em; width:min(38em,100%); max-height:min(80vh,44em);
  display:flex; flex-direction:column;
  box-shadow:0 24px 60px -20px rgba(20,23,28,.5);
}
.modal__head{
  display:flex; align-items:flex-start; gap:1rem;
  padding:1.3rem 1.4rem .4rem; border-bottom:1px solid var(--rule);
}
.modal__head h2{margin:0 0 .8rem; font-size:1.15rem; flex:1}
.modal__close{
  background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer;
  color:var(--muted); padding:0 .2rem;
}
.modal__close:hover{color:var(--ink)}
.modal__note{
  margin:0; padding:.9rem 1.4rem 0; font-size:.85rem; color:var(--muted);
}
.wordlist{
  list-style:none; margin:0; padding:1rem 1.4rem 1.6rem;
  overflow-y:auto;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(6.5em,1fr)); gap:.15rem .8rem;
  font-family:"Courier Prime",monospace; font-size:.85rem; color:var(--ink-mid);
}
.wordlist li::before{content:counter(w) ". "; counter-increment:w; color:var(--muted); font-size:.75em}
.wordlist{counter-reset:w}

@media (max-width:480px){
  .actions{flex-direction:column}
  .btn{width:100%}
}