:root{
  --bg:#14110F; --card:#1E1A17; --border:#3A342D; --input:#221E1A;
  --paper:#F2EEE3; --ink:#1A1714; --muted:#A39E95; --muted-paper:#5C554C;
  --yellow:#F5E663; --red-dark:#FF5A3C; --red-paper:#C8321E;
  --sans:"Archivo Black",sans-serif;
  --mono:"Courier Prime","Courier New",monospace;
  --marker:"Permanent Marker",cursive;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--paper);
  font-family:var(--mono);padding:0 24px 56px;
}
a{color:var(--yellow)}
a:hover{color:#FFF3A0}
input::placeholder{color:#8F887E}
.shell{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:40px}

/* header */
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px;padding:24px 0;border-bottom:1px dashed var(--border)}
/* 18 rather than 12: the wordmark's strike overhangs its text by 6px. */
.brand{display:flex;align-items:center;gap:18px}
/* The lines are crude by design, so the page says so before you read one. */
.rating{display:inline-flex;align-items:center;padding:3px 9px;border:1px solid var(--red-dark);
  border-radius:999px;color:var(--red-dark);font-family:var(--mono);font-weight:700;font-size:12px;
  letter-spacing:1px;white-space:nowrap;cursor:help}
.wordmark{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.wordmark .off{font-family:var(--sans);font-size:30px;color:var(--paper);letter-spacing:-.5px}
.wordmark .script{position:relative;font-family:var(--mono);font-weight:700;font-size:28px;color:var(--paper)}
.wordmark .strike{position:absolute;left:-6px;right:-6px;top:50%;height:5px;
  background:var(--red-dark);border-radius:3px;transform:rotate(-5deg)}
header nav{display:flex;flex-wrap:wrap;align-items:center;gap:24px;font-size:15px;min-width:0}
.meta{color:var(--muted)}
.navlink{color:var(--paper);background:none;border:0;font:inherit;text-decoration:underline;cursor:pointer}
.pill{display:flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--paper);
  border-radius:999px;color:var(--paper);text-decoration:none;font-weight:700;background:none;
  font-family:var(--mono);font-size:15px;cursor:pointer}

/* hero */
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.hero h1{margin:0;font-family:var(--sans);font-size:64px;line-height:1;letter-spacing:-1.5px}
.hero p.sub{margin:0;font-size:18px;color:var(--muted)}

/* One column at every width: the board sits under the page, never beside it. */
main{display:flex;flex-direction:column;gap:28px}
.left{min-width:0;display:flex;flex-direction:column;gap:22px}
aside{min-width:0;display:flex;flex-direction:column;gap:20px}

/* the page */
.page{position:relative;background:var(--paper);color:var(--ink);border-radius:4px;
  padding:36px 44px 40px;font-size:15px;line-height:1.5;
  box-shadow:0 28px 60px rgba(0,0,0,.5);transform:rotate(-.6deg)}
.page-top{display:flex;justify-content:space-between;font-size:12px;color:var(--muted-paper);margin-bottom:20px}
.page-top .label{letter-spacing:2px}
.slug{margin:0 0 12px;font-weight:700;text-transform:uppercase}
.action{margin:0 0 20px;max-width:58ch}
.speech{display:flex;flex-direction:column;align-items:center;gap:4px}
.paren{font-style:italic;color:var(--muted-paper)}
/* Extra line-height buys the numbered badges their own gutter above each line. */
.line{margin:10px 0 0;max-width:40ch;text-align:left;line-height:2.3}
.blank{position:relative;display:inline;margin:0 4px;vertical-align:-4px}
.word{display:inline-block;white-space:nowrap;vertical-align:-4px}
.gap{display:inline-block;width:.5em}
.blank .num{position:absolute;top:-17px;left:0;width:16px;height:16px;border-radius:50%;
  background:var(--red-paper);color:#fff;font-size:10px;font-weight:700;line-height:16px;
  text-align:center;box-shadow:0 0 0 2px var(--paper)}
/* One slot per letter of the answer, so revealed letters land in place. */
.slot{display:inline-block;width:.8em;margin-right:3px;text-align:center;font-weight:700;
  color:var(--red-paper);border-bottom:2px solid var(--red-paper);line-height:1.15}
.slot.punct{border-bottom:0;width:auto;margin-right:2px;color:var(--ink)}
.blank.solved .slot{border-bottom-color:var(--ink)}
.blank .num{z-index:1}
.blank.solved .num{display:none}

/* guess form */
form.guess{display:flex;flex-direction:column;gap:12px}
.fields{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.field{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;letter-spacing:2px;color:var(--muted)}
/* The answer's shape beside the field. It wraps between words, so a long line
   stays readable on a phone instead of running off the end of one row. */
.shape{font-family:var(--mono);font-size:19px;line-height:2.1}
.shape .word{display:inline-block;white-space:nowrap;vertical-align:-4px}
.shape .gap{display:inline-block;width:.6em}
.shape .slot{display:inline-block;width:.8em;margin-right:3px;text-align:center;font-weight:700;
  color:var(--paper);border-bottom:2px solid var(--border);line-height:1.15}
.shape .slot.punct{border-bottom:0;width:auto;margin-right:2px;color:var(--muted)}
.shape.solved .slot{color:var(--yellow);border-bottom-color:var(--yellow)}
.field input{height:60px;padding:0 20px;background:var(--input);border:2px solid var(--border);
  border-radius:6px;color:var(--paper);font-family:var(--mono);font-size:19px;outline-color:var(--yellow)}
.field input.wrong{border-color:var(--red-dark)}
.field input.right{border-color:var(--yellow)}
.field input:disabled{opacity:.75}
.lock{flex:0 0 auto;height:60px;padding:0 32px;background:var(--red-paper);color:#fff;border:0;
  border-radius:6px;font-family:var(--sans);font-size:18px;letter-spacing:.5px;cursor:pointer;
  box-shadow:4px 4px 0 var(--yellow)}
.lock:disabled{opacity:.45;cursor:default;box-shadow:4px 4px 0 var(--border)}
.formfoot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.formfoot a,.linklike{color:var(--muted);background:none;border:0;padding:0;font:inherit;
  text-decoration:underline;cursor:pointer}
.verdict{font-size:15px;min-height:20px}
.verdict:empty{display:none;min-height:0}
.verdict.bad{color:var(--red-dark)}
.verdict.good{color:var(--yellow)}

/* cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:24px;
  display:flex;flex-direction:column;gap:14px}
.card .eyebrow{font-size:14px;letter-spacing:2px;color:var(--muted)}
.ticks{display:grid;gap:6px}
.ticks-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ticks span{display:block;height:10px;border-radius:2px;background:var(--border)}
.ticks-3 span{height:14px}
.ticks span.on{background:var(--yellow)}
.fine{font-size:14px;color:var(--muted)}

.panel{gap:14px}
.hints{gap:12px}
.hints-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hints-head h2{margin:0;font-family:var(--sans);font-size:22px}
.hints-head .scrawl-sm{font-family:var(--marker);font-size:16px;color:var(--red-dark);transform:rotate(-3deg)}
.hint{display:flex;flex-direction:column;gap:6px;width:100%;min-height:56px;padding:12px 16px;
  background:var(--bg);border:1px dashed #4A433A;border-radius:8px;color:var(--paper);
  font-family:var(--mono);font-size:16px;text-align:left;cursor:pointer}
.hint:disabled{cursor:default}
.hint .row{display:flex;justify-content:space-between;gap:12px;width:100%}
.hint .lbl{font-weight:700}
.hint .cost{color:var(--red-dark);font-weight:700}
.hint .answer{align-self:flex-start;background:var(--yellow);color:var(--ink);padding:2px 8px;
  font-weight:700;transform:rotate(-.8deg)}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;
  border-top:1px dashed var(--border);font-size:14px;color:var(--muted)}

/* modal */
.scrim{position:fixed;inset:0;background:rgba(10,8,7,.8);display:flex;align-items:center;
  justify-content:center;padding:24px;z-index:10}
.scrim[hidden]{display:none}
.modal{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:28px;
  max-width:520px;width:100%;max-height:86vh;overflow:auto;display:flex;flex-direction:column;gap:16px}
.modal h2{margin:0;font-family:var(--sans);font-size:26px}
.modal ol,.modal ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:#D9D4C9}
.board{display:flex;flex-direction:column;gap:8px}
.board .row{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;background:var(--bg);
  border:1px dashed #4A433A;border-radius:8px}
.board .row.me{border-style:solid;border-color:var(--yellow)}
.board .pts{font-family:var(--sans);color:var(--yellow)}
.closebtn{align-self:flex-start}
/* Above the game modal, in case a results screen is already up underneath. */
#notice{z-index:20}
.notice-modal{max-width:420px}
.notice-modal p{margin:0;line-height:1.6;color:#D9D4C9}

/* the results screen */
.modal.result-modal{max-width:460px;gap:20px}
.result{display:flex;flex-direction:column;gap:18px}
.result .scrawl-top{font-family:var(--marker);font-size:19px;color:var(--red-dark);
  transform:rotate(-2deg);align-self:flex-start}
.result h3{margin:-8px 0 0;font-family:var(--sans);font-size:46px;line-height:.95;
  letter-spacing:-1.5px;text-transform:uppercase}
/* The solved line on its scrap of paper, answer highlighted. */
.result-line{background:var(--paper);color:var(--ink);border-radius:4px;padding:18px 20px;
  font-family:var(--mono);font-size:15px;line-height:1.7;transform:rotate(-.4deg)}
.result-line .cue{display:block;text-align:center;font-weight:700;letter-spacing:1px;
  font-size:13px;margin-bottom:6px}
.result-line mark{background:var(--yellow);color:var(--ink);font-weight:700;padding:1px 5px}
.picks-wrap{display:flex;flex-direction:column;gap:8px}
.rate-wrap{display:flex;flex-direction:column;gap:8px}
.stars{display:flex;gap:2px}
/* An outlined star with a filled copy laid exactly over it and clipped, so a
   half reads as a half. Both are the same square, so the box's middle is the star's. */
.star{position:relative;display:inline-block;width:1em;height:1em;line-height:1}
.star svg{display:block;width:100%;height:100%;stroke-linejoin:round}
.star .dim{fill:none;stroke:var(--muted);stroke-width:1.6;opacity:.55}
.star .lit{position:absolute;inset:0;padding:inherit;box-sizing:content-box;width:1em;height:1em;
  fill:var(--yellow);stroke:var(--yellow);stroke-width:1.6}
/* Padded out to a 50px target for a thumb; the dim stars keep the scale visible.
   Five of them come to 258px, which fits the results card on a 375px iPhone. */
.stars .star{box-sizing:content-box;font-size:36px;padding:7px}
/* Narrower phones (iPhone SE and the like) step back down so the row still fits. */
@media (max-width:360px){
  .stars .star{font-size:30px;padding:4px}
}
.half{position:absolute;top:0;bottom:0;width:50%;padding:0;background:none;border:0;cursor:pointer}
.half.left{left:0}
.half.right{right:0}
.half:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px;border-radius:4px}
.picks{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.picks .key{min-width:40px;min-height:40px;padding:0 6px;flex:0 0 auto}
/* A miss only has to look spent on the board. Here it is the record of what you
   tried, so it keeps a visible edge instead of sinking into the background. */
.picks .key.miss{opacity:.75;background:var(--card);border-style:solid;border-color:var(--border)}
/* A vowel that landed still cost a strike, so it cannot look like a free hit.
   Same three states the shared squares use. */
.picks .key.hit.vowel{background:var(--red-paper);border-color:var(--red-paper);color:#fff}
.picks .after{font-family:var(--marker);font-size:16px;color:var(--red-dark);
  transform:rotate(-3deg);margin-left:2px}
/* What the three colours mean, in the same colours. */
.pickkey{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.pickkey span{display:inline-flex;align-items:center;gap:6px}
.pickkey i{width:14px;height:14px;border-radius:3px;border:1px solid var(--border);flex:0 0 auto}
.pickkey i.hit{background:var(--yellow);border-color:var(--yellow)}
.pickkey i.vowel{background:var(--red-paper);border-color:var(--red-paper)}
.pickkey i.miss{background:var(--card)}
.result-line mark.blanked{background:none;color:var(--muted-paper);letter-spacing:2px}
.clip-wrap{display:flex;flex-direction:column;gap:8px}
.clip{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--border);
  border-radius:6px;overflow:hidden;background:#000}
.clip img{width:100%;height:100%;object-fit:cover;display:block}
.clip iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.clip-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:60px;height:60px;border-radius:50%;background:var(--red-paper);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px;
  box-shadow:3px 3px 0 var(--yellow);pointer-events:none}
.clip-hit{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;
  cursor:pointer}
.clip-hit:hover ~ .clip-play,.clip-hit:focus-visible ~ .clip-play{background:var(--yellow);color:var(--ink)}
.watch{align-self:start;font-size:14px;color:var(--yellow);text-decoration:none;
  border-bottom:1px solid var(--yellow);padding-bottom:2px}
.watch:hover{color:var(--paper);border-color:var(--paper)}
.copybtn{width:100%;min-height:56px;padding:0 20px;background:var(--red-paper);color:#fff;border:0;
  border-radius:6px;font-family:var(--sans);font-size:18px;letter-spacing:.5px;cursor:pointer;
  box-shadow:4px 4px 0 var(--yellow)}
.copybtn.done{background:var(--yellow);color:var(--ink);box-shadow:4px 4px 0 var(--border)}
.result-foot{font-size:13px;color:var(--muted)}
.result-foot b{color:var(--paper);font-weight:700}

.devbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:13px;color:var(--muted);
  border:1px dashed var(--border);border-radius:8px;padding:10px 14px}
.devbar button{font:inherit;color:var(--muted);background:none;border:1px solid var(--border);
  border-radius:6px;padding:4px 10px;cursor:pointer}

@media (max-width:900px){
  .hero h1{font-size:44px}
  .page{padding:26px 22px 32px}
}


/* guess history */
.attempts{display:flex;flex-direction:column;gap:8px}
.attempt{display:flex;gap:10px;align-items:baseline;padding:8px 12px;background:var(--bg);
  border:1px dashed #4A433A;border-radius:6px}
.attempt .n{font-family:var(--sans);font-size:12px;color:var(--red-dark)}
.attempt .txt{font-size:15px;color:#D9D4C9}



/* the film, once the line is out */
.filmnote{margin:18px 4px 0 0;text-align:right;font-family:var(--marker);font-size:17px;
  color:var(--red-paper)}
.filmnote::before{content:"";display:inline-block}

/* surrounding dialogue */
.speech.quiet{margin-bottom:12px}
.cue{font-weight:700;letter-spacing:1.5px;font-size:14px;color:#4A433B}
.dlg{margin:2px 0 0;max-width:46ch;text-align:left;color:#3C352E}
.action.beat{margin:0 0 12px;max-width:58ch;font-style:italic;color:var(--muted-paper)}

/* the letter board */
.letterboard{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.key{min-height:40px;padding:0;background:var(--bg);border:1px dashed #4A433A;border-radius:6px;
  color:var(--paper);font-family:var(--mono);font-weight:700;font-size:16px;cursor:pointer}
.key:hover:not(:disabled){border-style:solid;border-color:var(--yellow)}
.key:disabled{cursor:default}
.key.vowel:not(.hit):not(.miss){border-color:#5B5246;color:#CFC8BC}
.key.hit{background:var(--yellow);border-style:solid;border-color:var(--yellow);color:var(--ink)}
.key.miss{opacity:.3;text-decoration:line-through}
.key:disabled:not(.hit):not(.miss){opacity:.3}
/* Seven across is what a phone has room for. Given more, lay the alphabet out
   in two even rows of thirteen rather than stretching seven keys to fill. */
@media (min-width:720px){
  .letterboard{grid-template-columns:repeat(13,minmax(0,1fr))}
  .key{min-height:48px}
}

/* strikes: three marks, white until spent, then red */
.strikerow{display:flex;align-items:center;gap:16px}
.strikes{display:flex;gap:14px;align-items:center}
.mark{font-family:var(--sans);font-size:20px;line-height:1;color:var(--paper);opacity:.3}
.mark.spent{color:var(--red-dark);opacity:1}
.tries{color:var(--paper)}
.tries.warn{color:var(--red-dark);font-weight:700}

.rules{margin:0;font-size:14px;color:var(--muted)}
.rules:empty{display:none}

/* dev-only day picker */
.daypick{font-family:var(--mono);font-size:13px;color:var(--paper);background:var(--card);
  border:1px solid var(--border);border-radius:999px;padding:8px 12px;cursor:pointer;
  max-width:100%;min-width:0}
.daypick[hidden]{display:none}

/* nothing to say yet: don't hold the space open */
/* Nothing to say and nothing to press: the foot stays out of the way. */
.formfoot:empty{display:none}

/* the marks carry the board's yellow until they're spent */
.mark{color:var(--yellow);opacity:.8}
.mark.spent{color:var(--red-dark);opacity:1}

/* ---------- the vault ---------- */
/* The bar that stands between the hero and an old line. */
.vaultbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding:10px 14px;border:1px dashed var(--yellow);border-radius:8px;
  font-family:var(--mono);font-size:13px;letter-spacing:1px;color:var(--yellow)}
.vaultbar[hidden]{display:none}

.vault-modal{max-width:640px}
.vault{display:flex;flex-direction:column;gap:16px}
.vaultlist{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;
  padding-right:4px}
/* A shelf of lines: number and film on the left, when and how it went on the
   right. The whole row is the button. */
.vaultrow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;padding:10px 12px;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:8px;color:inherit}
.vaultrow:hover{border-color:var(--yellow)}
.vaultrow.here{border-color:var(--yellow);border-style:dashed}
/* Days you have finished have nothing left to protect, so they sit back. */
.vaultrow.won,.vaultrow.revealed{opacity:.72}
.vaultrow:hover{opacity:1}
.vmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.vno{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;color:var(--muted)}
.vfilm{font-family:var(--sans);font-size:17px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.vside{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.vdate{font-family:var(--mono);font-size:12px;color:var(--muted)}
.vstate{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;
  letter-spacing:1px;color:#D9D4C9}
.vaultrow.none .vstate{color:var(--yellow)}
.vmark{font-size:13px}
.vstars{display:inline-flex;gap:1px;font-size:13px}
.vrating{display:inline-flex;align-items:center;gap:5px}
.vrating:empty{display:none}
.vvotes{font-family:var(--mono);font-size:11px;color:var(--muted)}

@media (max-width:560px){
  /* On a phone the row is narrow enough that a long title was being cut off
     mid-word, so it wraps instead and the row grows. */
  .vfilm{font-size:15px;white-space:normal;overflow:visible;text-overflow:clip}
  .vaultrow{align-items:flex-start}
  .vaultlist{max-height:56vh}
  /* The date takes its own row so Vault and How to play share the next one,
     rather than Vault riding the date line and How to play dropping alone. */
  header nav{column-gap:20px;row-gap:10px}
  .meta,.daypick{flex-basis:100%}
  .navlink{padding:0}
  /* Narrower Solve so the answer box keeps most of the row. */
  .lock{padding:0 20px}
}