/* ========  PALETTE & SCALE  ======== */
:root{
  --cream:#f7f3ed;
  --ink:#111;
  --orange:#aa4a00;

  --grey:#d6d3d1;
  --grey-dark:#8f8c8b;

  --green:#2a9856;
  --blue:#2250be;
  --red:#c33434;

  --gap:.15rem;
  --tile:3rem;
}
@media(max-width:520px){
  :root{ --tile:2.2rem; --gap:.26rem; }
}

html,body{
  margin:0;
  height:100%;
  background:var(--cream);
  font-family:'Libre Baskerville',Georgia,serif;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

[hidden]{ display:none !important; }

/* ========  HEADER  ======== */
header{
  text-align:center;
  padding:1rem 1rem .5rem;
}
h1{
  margin:0;
  font-size:2.0rem;
  font-weight:700;
  letter-spacing:.03em;
}
header hr{
  width:85%;
  max-width:680px;
  margin:.5rem auto 0;
  border:none;
  border-top:2px solid var(--ink);
}
time{
  display:block;
  font-size:.8rem;
  opacity:.7;
  margin-top:.15rem;
}

/* ========  WRAPPER  ======== */
.wrapper{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:1rem;
}

/* ========  META ======== */
.meta{
  text-align:center;
  max-width:640px;
  margin:.5rem 1rem;
}
#work-title{
  margin:0 0 .15rem;
  font-size:1.2rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.01em;
}
#work-meta{
  margin:0;
  font-size:.88rem;
  opacity:.8;
}

/* ========  PLAYZONE (5×6)  ======== */
.playzone{
  position:relative;
  background:#fff;
  padding:1rem .8rem;
  box-shadow:0 4px 14px rgba(0,0,0,.05);
  width:calc(var(--tile)*5 + var(--gap)*4);
  height:calc(var(--tile)*6 + var(--gap)*5);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:.6rem;
}
blockquote.scroll{
  margin:0;
  font-size:1rem;
  line-height:1.55;
  text-align:center;
  max-height:100%;
  overflow:auto;
  transition:filter .25s,opacity .25s;
}
.playzone.blurred blockquote{
  filter:blur(3px) brightness(.7);
  opacity:.25;
}

/* scroll hint ▼ */
.scroll-hint{
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  font-size:1.1rem;
  opacity:0;
  transition:opacity .4s;
  pointer-events:none;
}
.scroll-hint.show{ opacity:.6; }

/* expand (reader) button */
.expand-btn{
  position:absolute;
  right:4px;
  bottom:4px;
  background:none;
  border:none;
  color:var(--grey-dark);
  font-size:1.25rem;     /* smaller than before */
  line-height:1;
  cursor:pointer;
  padding:0 .1rem;
}
.expand-btn:hover{ color:var(--ink); }

/* grid overlay */
#grid-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
}
.grid{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  margin-top:var(--gap);
}
.word-row{
  display:flex;
  gap:var(--gap);
}
.word-row .tile{
  width:var(--tile);
  height:var(--tile);
  display:flex;
  justify-content:center;
  align-items:center;
  font-weight:700;
  font-size:.98rem;
  border-radius:4px;
  box-shadow:0 2px 4px rgba(0,0,0,.08);
}
.word-row.solution .tile{ background:var(--green); color:#fff; }
.word-row.valid    .tile{ background:var(--blue);  color:#fff; }
.word-row.invalid  .tile{ background:var(--red);   color:#fff; }
.word-row.typing   .tile{ background:var(--grey); }

/* fade & blur old rows */
.fade{
  opacity:.25;
  filter:blur(2px);
  transition:opacity 1.2s .4s, filter 1.2s .4s;
}

/* answer rows */
.word-row.answer{
  opacity:0;
  filter:blur(4px);
}
.word-row.answer.show{
  opacity:1;
  filter:blur(0);
  transition:opacity 1.2s, filter 1.2s;
}
.word-row.answer .tile{
  background:none;
  color:var(--ink);
  box-shadow:none;
}

/* ========  COUNTER ======== */
.counter{
  text-align:center;
  font-size:.85rem;
  font-weight:700;
  margin:.6rem 0 0;
  max-height:4rem;
  transition:opacity .4s, max-height .4s, margin .4s;
}
body.finished-ui #counter{
  opacity:0;
  max-height:0;
  margin:0;
  overflow:hidden;
}

/* ========  SOURCE LINK ======== */
.source-link{
  max-width:640px;
  margin:.4rem 1rem .4rem;
  text-align:center;
  font-size:.70rem;
  color:var(--orange);
}
.source-link a{
  color:inherit;
  text-decoration:none;
  position:relative;
}
.source-link a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:1px;
  background:currentColor;
}
.source-link .affiliate-link{ font-weight:700; text-decoration:none; }
.source-link .affiliate-link::after{ content:none; }
.source-link .affiliate-link:hover{ opacity:.85; }

/* ========  HOPPER ======== */
.hopper{
  width:clamp(300px,94vw,1100px);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.letter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap);
  justify-content:center;
  transition:opacity .6s;
}
body.finished-ui .letter-bar{
  opacity:.25;
  pointer-events:none;
}

.tile{
  width:var(--tile);
  height:var(--tile);
  border-radius:4px;
  background:var(--grey);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s, background .15s, opacity .25s, box-shadow .15s;
  box-shadow:0 2px 4px rgba(0,0,0,.07);
}
.tile:hover{ transform:translateY(-3px); }
.tile.selected{ background:var(--grey-dark); transform:scale(.93); }
.tile.gone{ opacity:0; transform:scale(.5); pointer-events:none; }

/* ========  CURRENT BAR (live controls) ======== */
.current-bar{
  display:flex;
  gap:.6rem;
  align-items:center;
  margin-top:.8rem;
  font-weight:700;
  flex-wrap:wrap;
  justify-content:center;
}
#current-word{
  min-width:7ch;
  text-align:center;
  font-size:1rem;
}
button{
  font:inherit;
  font-size:1rem;
  font-weight:700;
  text-transform:uppercase;
  background:var(--orange);
  color:#fff;
  border:none;
  border-radius:4px;
  padding:.48rem 1.2rem;
  cursor:pointer;
  transition:background .15s, opacity .15s;
}
.current-bar button {
  display: inline-flex;         /* use the same box model */
  align-items: center;          /* vertically center the icon/text */
  justify-content: center;      /* horizontally center it */
  line-height: 1;               /* collapse extra line-height from glyphs */
}
button:hover{ background:#c95f18; }
button:disabled{ opacity:.45; cursor:default; }
body.finished-ui #current-bar{ display:none; }

/* shuffle btn inside current‑bar (grey style) 
#shuffle1
  font:inherit;
  font-size:1rem;
  background:var(--grey);
  color:var(--ink);
  padding:.48rem .8rem;
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition:background .15s;
}
#shuffle:hover{ background:var(--grey-dark); }*/
#back{ margin-right:.3rem; }
#shuffle{ margin-right:.1rem; }

/* ========  SCORE, STREAK, SHARE ======== */
.score-card{
  display:none;
  opacity:0;
  margin-top:1rem;
  font-family:monospace;
  font-size:.9rem;
  white-space:pre-wrap;
  text-align:center;
  transition:opacity 1.2s;
}
.score-card.show{ display:block; opacity:1; }

.share-btn{
  display:none;
  margin-top:.1rem;
  font:inherit;
  font-size:.9rem;
  font-weight:700;
  background:var(--orange);
  color:#fff;
  border:none;
  border-radius:4px;
  padding:.48rem 1.3rem;
  cursor:pointer;
  transition:background .15s, opacity .15s;
}
.share-btn:hover{ background:#c95f18; }
.share-btn.show{
  display:inline-block;
  opacity:0;
  animation:btnfade 1.2s .4s forwards;
}
@keyframes btnfade{ to{ opacity:1; } }

/* ========  WORD LISTS ======== */
.word-cols{
  display:none;
  margin-top:1.1rem;
  gap:2rem;
  flex-wrap:wrap;
  justify-content:center;
}
.word-cols.show{ display:flex; }

.col-head{
  margin:0 0 .3rem;
  font-weight:700;
  text-align:center;
}
.word-list{
  margin:0;
  padding:0;
  list-style:none;
  font-size:.85rem;
  text-align:center;
}
.word-list li{ margin:.1rem 0; }

/* colored squares for streak totals */
.sq{
  display:inline-block;
  width:1rem;
  height:1rem;
  margin:0 .2rem;
  border-radius:2px;
}
.sq.green{ background:var(--green); }
.sq.blue { background:var(--blue);  }
.sq.red  { background:var(--red);   }

/* ========  FULL‑SCREEN READER DIALOG ======== */
dialog#reader-modal{
  width:90vw;
  max-width:750px;
  max-height:90vh;
  border:none;
  border-radius:8px;
  padding:2rem 1.5rem;
  background:#fff;
  overflow:auto;
}
dialog::backdrop{ background:rgba(0,0,0,.5); }
#reader-content{
  font-size:1.05rem;
  line-height:1.6;
}
/* replace whole .close-btn block */
.close-btn{
  position:absolute;
  top:.4rem;
  right:.4rem;
  background:none;
  border:none;
  font-size:1.1rem;
  line-height:1;
  color:var(--ink);
  cursor:pointer;
}
.close-btn:hover{ transform:scale(1.1); }   /* optional subtle hover */

/* ========  SHARE DIALOG ======== */
dialog#share-modal{
  width:min(360px, 88vw);
  border:none;
  border-radius:10px;
  padding:1.3rem 1.2rem 1rem;
  background:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}
#share-modal h3{
  margin:0 0 .4rem;
  font-size:1.12rem;
  letter-spacing:.02em;
}
.share-help{
  margin:0 0 .65rem;
  font-size:.9rem;
  color:var(--grey-dark);
}
#share-text{
  width:100%;
  min-height:6rem;
  resize:none;
  border:1px solid #dedad4;
  border-radius:6px;
  padding:.6rem .7rem;
  background:#f8f5ef;
  font-family:'Libre Baskerville', Georgia, serif;
  font-size:.95rem;
  line-height:1.5;
  color:var(--ink);
}
.share-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:.6rem;
  margin-top:.9rem;
  flex-wrap:wrap;
}
.share-actions button{
  font:inherit;
  border-radius:4px;
  padding:.45rem 1.1rem;
  border:1px solid var(--orange);
  background:#fff;
  color:var(--orange);
  cursor:pointer;
  transition:background .2s, color .2s, opacity .2s;
}
.share-actions button.primary{
  background:var(--orange);
  color:#fff;
}
.share-actions button:hover{ opacity:.85; }
.share-status{
  margin-top:.6rem;
  font-size:.85rem;
  color:var(--grey-dark);
  min-height:1.2em;
}

/* hide old duplicate streak line if still present */
.streak-line{ display:none !important; }

/* score card preserves line breaks */
#score-card {
  white-space: pre-line;   /* \n == new line in <div> textContent */
}
.clue { background:#32cd32; color:#fff; border-radius:2px; padding:0 2px; }


/* ========  HOW-TO MODAL ======== */
dialog#howto-modal{
  width:min(400px, 90vw);
  border:none;
  border-radius:12px;
  padding:1.6rem 1.4rem 1.5rem;
  background:#fff;
  box-shadow:0 18px 34px rgba(0,0,0,.22);
  text-align:left;
}
#howto-modal h3{
  margin:0 0 .8rem;
  font-size:1.05rem;
  letter-spacing:.02em;
}
.howto-body{
  position:relative;
  min-height:260px;
}
.howto-slide{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.howto-slide.is-active{ display:flex; }
.howto-text{ font-size:.92rem; line-height:1.5; }
.howto-text h4{ margin:0 0 .35rem; font-size:1rem; }
.howto-visual{ width:100%; display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.howto-nav{ margin-top:1.1rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.howto-dots{ display:flex; gap:.35rem; justify-content:center; flex:1; }
.howto-dot{ width:.5rem; height:.5rem; border-radius:50%; background:#d5d1cc; }
.howto-dot.is-active{ background:var(--orange); }
.howto-nav button{
  font:inherit;
  font-weight:700;
  text-transform:none;
  border-radius:4px;
  border:1px solid var(--orange);
  background:#fff;
  color:var(--orange);
  padding:.4rem .95rem;
}
.howto-nav button.primary{ background:var(--orange); color:#fff; }
.howto-nav button:disabled{ opacity:.45; border-color:#d9d5cf; color:#9f9b95; background:#f2eeea; cursor:default; }

.howto-trigger{
  margin-top:1rem;
  font:inherit;
  font-size:.88rem;
  font-weight:600;
  text-transform:none;
  background:none;
  border:none;
  color:var(--orange);
  padding:0;
  cursor:pointer;
  text-decoration:underline;
}
.howto-trigger:hover{ opacity:.75; }

.howto-board{
  --howto-tile:1.85rem;
  --howto-gap:.22rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
}
.howto-playzone{
  position:relative;
  --tile:var(--howto-tile);
  --gap:var(--howto-gap);
  width:calc(var(--tile) * 5 + var(--gap) * 4);
  height:calc(var(--tile) * 6 + var(--gap) * 5);
  padding:.75rem .65rem;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
  margin:0;
}
.howto-playzone blockquote{
  margin:0;
  font-size:.88rem;
  line-height:1.45;
  text-align:center;
  max-height:100%;
  overflow:hidden;
}
.howto-grid-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  gap:var(--gap);
  padding-top:.4rem;
}
.howto-grid-overlay .grid{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}
.howto-grid-overlay .word-row{
  display:flex;
  gap:var(--gap);
}
.howto-grid-overlay .tile{
  width:var(--tile);
  height:var(--tile);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  background:#f3f0ea;
  border:1px solid var(--grey);
  color:#1b1b1b;
  box-shadow:0 2px 4px rgba(0,0,0,.07);
  pointer-events:none;
  transition:opacity .38s ease, transform .4s ease;
}
.howto-playzone--foundations{
  transition:filter .45s ease, opacity .45s ease;
}
.howto-playzone--foundations .howto-grid-overlay{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .45s ease, transform .45s ease;
}
.howto-playzone--foundations.revealed .howto-grid-overlay{
  opacity:1;
  transform:translateY(0);
}
.howto-playzone--foundations .word-row.solution .tile{
  background:var(--green);
  color:#fff;
}
.playzone--neutral .word-row.solution .tile{
  background:#f3f0ea;
  color:#1b1b1b;
}
.howto-board--hopper{
  position:relative;
}
.howto-board--hopper .howto-playzone{
  transition:filter .45s ease, opacity .45s ease;
}
.howto-board--hopper .howto-playzone .tile{
  transition:opacity .38s ease, transform .4s ease;
}
.howto-board--hopper.show-hopper .howto-playzone .tile{
  opacity:0;
  transform:translateY(14px) scale(.94);
}
.howto-board--clues .clue{
  background:transparent;
  color:inherit;
  transition:background-color .25s ease, color .25s ease;
  border-radius:2px;
  padding:0 2px;
}
.howto-slide[data-step="3"].show-clues .clue{
  background:var(--green);
  color:#fff;
  font-weight:700;
  box-shadow:0 0 0 2px rgba(255,255,255,.75);
}
.howto-board--clues .hopper-letter{
  opacity:1;
  transform:translateY(0);
  transition:none;
}
.play-demo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
}
.howto-board--play{
  align-items:center;
  gap:1rem;
}
.howto-board--play .play-demo{
  width:100%;
}
.howto-playzone--play{
  transition:none;
}
.howto-playzone--play .howto-grid-overlay{
  opacity:1;
  transform:none;
}
.play-demo__overlay{
  justify-content:flex-start;
  width:100%;
  padding-top:.4rem;
}
.play-demo__row{
  display:flex;
  gap:var(--howto-gap);
}
.howto-board--play .play-demo__row .tile{
  width:var(--tile);
  height:var(--tile);
  border-radius:6px;
  border:1px solid var(--grey);
  background:#f3f0ea;
  color:#1b1b1b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .32s ease, transform .32s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
  transition-delay:calc(var(--delay, 0) * 90ms);
}
.play-demo--foundation .play-demo__row--foundation .tile{
  opacity:1;
  transform:translateY(0);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.play-demo--lock .play-demo__row--foundation .tile{
  background:var(--green);
  color:#fff;
}
.play-demo--valid .play-demo__row--valid .tile{
  opacity:1;
  transform:translateY(0);
  background:var(--blue);
  color:#fff;
  box-shadow:0 6px 16px rgba(34,80,190,.24);
}
.play-demo--invalid .play-demo__row--invalid .tile{
  opacity:1;
  transform:translateY(0);
  background:var(--red);
  color:#fff;
  box-shadow:0 6px 16px rgba(180,35,35,.24);
}
.play-demo__row--ghost .tile{
  opacity:.15;
  transform:none;
  background:rgba(243,240,234,.6);
  border:1px dashed rgba(118,106,94,.38);
  box-shadow:none;
  transition:none;
}
.play-demo__hopper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--howto-gap) * 1.6);
}
.play-demo__hopper .hopper-row{
  width:100%;
}
.play-demo__hopper .hopper-letter{
  opacity:1;
  transform:translateY(0);
  transition:transform .3s ease, background-color .25s ease, color .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.play-demo--foundation .hopper-letter[data-demo~="foundation"]{
  transform:translateY(-8px);
  background:var(--green);
  color:#fff;
  box-shadow:0 10px 20px rgba(46,160,67,.28);
}
.play-demo--lock .hopper-letter[data-demo~="foundation"]{
  transform:translateY(0);
  opacity:.38;
  background:#f8f5ef;
  color:#1c1a18;
  box-shadow:none;
}
.play-demo--valid .hopper-letter[data-demo~="valid"]{
  transform:translateY(-8px);
  background:var(--blue);
  color:#fff;
  box-shadow:0 10px 20px rgba(34,80,190,.28);
}
.play-demo--invalid .hopper-letter[data-demo~="invalid"]{
  transform:translateY(-8px);
  background:var(--red);
  color:#fff;
  box-shadow:0 10px 20px rgba(180,35,35,.22);
}
.play-demo__legend{
  list-style:none;
  margin:.8rem 0 0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  font-size:.78rem;
  color:var(--grey-dark);
}
.play-demo__badge{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.15);
  background:#f3f0ea;
}
.play-demo__badge--green{ border-color:var(--green); color:var(--green); }
.play-demo__badge--blue{ border-color:var(--blue); color:var(--blue); }
.play-demo__badge--red{ border-color:var(--red); color:var(--red); }
.share-visual{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.75rem;
}
.share-card-preview{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  padding:1rem 1.4rem;
  background:#111;
  color:#fff;
  border-radius:12px;
  box-shadow:0 18px 34px rgba(0,0,0,.25);
  font-family:'Libre Baskerville', Georgia, serif;
  min-width:220px;
}
.share-card-preview__title{
  font-size:1.1rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.share-card-preview span{ font-size:.95rem; }
.share-card-preview__grid{ font-size:1.3rem; letter-spacing:.25em; }
.howto-hopper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(var(--howto-gap) * 1.6);
  width:calc(var(--howto-tile) * 10 + var(--howto-gap) * 9);
  max-width:100%;
  padding:0;
}
.hopper-row{
  display:flex;
  gap:var(--howto-gap);
  justify-content:center;
  width:100%;
}
.hopper-letter{
  width:calc(var(--howto-tile) * .82);
  height:calc(var(--howto-tile) * .82);
  border-radius:6px;
  background:#f8f5ef;
  border:1px solid var(--grey);
  color:#1c1a18;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  cursor:default;
  box-shadow:none;
  opacity:0;
  transform:translateY(-16px);
  transition:opacity .35s ease, transform .35s ease;
  transition-delay:calc(var(--delay, 0) * 32ms);
}
.howto-board--hopper.show-hopper .hopper-letter{
  opacity:1;
  transform:translateY(0);
}
.visual-caption{
  margin:0;
  font-size:.78rem;
  color:var(--grey-dark);
  text-align:center;
}

@media (max-width:480px){
  .howto-board{ --howto-tile:1.6rem; --howto-gap:.18rem; }
  .howto-playzone{ padding:.65rem .55rem; }
  .howto-playzone blockquote{ font-size:.8rem; }
  .howto-hopper{ width:calc(var(--howto-tile) * 10 + var(--howto-gap) * 9); }
}

@media (prefers-reduced-motion: reduce){
  .howto-slide,
  .howto-grid-overlay,
  .howto-hopper,
  .howto-board--hopper .howto-playzone .tile,
  .hopper-letter,
  .howto-board--clues .clue,
  .play-demo__row .tile{
    transition:none !important;
  }
}