/* Rebus game styling. Loaded after app.css, which supplies the tokens, the page shell,
   the footer and the consent banner.

   On the palette: the prototype used its own ground and type (indigo #17132B, bone text,
   Bodoni Moda + Space Grotesk). Those fonts cannot load here — the site self-hosts no
   webfonts and the CSP allows neither fonts.googleapis.com nor fonts.gstatic.com — and a
   second dark palette on the same domain would read as a different site. So the ground,
   type and surfaces come from app.css.

   What is kept from the prototype is the part that carries meaning: mint for a word in
   the right place, amber for a word in the wrong place. Those two are functional rather
   than decorative, so they are declared here as tokens and used nowhere else. */

.rebus {
  --hit: #63e6b4;   /* right word, right slot */
  --miss: #e8a33d;  /* right word, wrong slot */
  --glyph-stack: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2",
                 "Noto Sans Symbols", "DejaVu Sans", var(--font-serif);
  max-width: 460px;
  margin: 0 auto;
}

/* --- the stage ---------------------------------------------------------- */

.rebus__stage {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-4) var(--space-6);
  margin-bottom: var(--space-5);
}

.rebus__glyphs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 7vw, 40px);
}

.rebus__sort {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.rebus__mark {
  font-family: var(--glyph-stack);
  font-size: clamp(46px, 15vw, 64px);
  line-height: 1;
  color: var(--text);
}

/* Glosses are hidden during play and drop in at the end. Animating height is not
   possible, so the row reserves its space via the grid trick rather than shifting the
   glyphs downward when the reveal lands. */
.rebus__gloss {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .4s ease, opacity .4s ease .1s;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--hit);
}
.rebus__gloss > span { overflow: hidden; }
.rebus__gloss.is-shown {
  grid-template-rows: 1fr;
  opacity: 1;
}

.rebus__verdict {
  display: none;
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  text-align: center;
}
.rebus.is-done .rebus__verdict { display: block; }

.rebus__answer {
  font-family: var(--font-serif);
  font-size: 29px;
  line-height: 1.25;
  color: var(--text);
}
.rebus__outcome {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* --- entry -------------------------------------------------------------- */

.rebus__entry { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }

.rebus__field {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  padding: 11px 14px;
}
.rebus__field::placeholder { color: var(--text-faint); }
.rebus__field:disabled { opacity: .5; }

.rebus__alert {
  font-size: 13px;
  color: var(--miss);
  min-height: 20px;
  margin-bottom: var(--space-3);
}

/* --- the ledger --------------------------------------------------------- */

.rebus__ledger { display: flex; flex-direction: column; gap: 7px; margin-bottom: var(--space-5); }
.rebus__line { display: flex; gap: 7px; }

.rebus__word {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 14px;
  text-align: center;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.rebus__word.is-here { border-color: var(--hit); color: var(--hit); }
.rebus__word.is-near { border-color: var(--miss); color: var(--miss); }

.rebus__line.is-wrong { animation: rebus-jolt .34s ease; }
@keyframes rebus-jolt {
  20% { transform: translateX(-5px); }
  50% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}

/* --- hint and closer ---------------------------------------------------- */

.rebus__hint {
  display: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  margin-bottom: var(--space-5);
}
.rebus__hint.is-open { display: inline-block; }
.rebus__hint:hover { color: var(--miss); }

.rebus__closer {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: var(--space-5);
}
.rebus__closer.is-open { display: flex; }
.rebus__countdown { font-size: 13px; color: var(--text-muted); }
.rebus__countdown b { color: var(--text); font-weight: 400; font-variant-numeric: tabular-nums; }

/* --- leaderboard -------------------------------------------------------- */

.rebus__board { display: none; margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.rebus__board.is-open { display: block; }
.rebus__board-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.rebus__board-head h2 { font-family: var(--font-serif); font-size: 20px; font-weight: 400; }

.rebus__place {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  padding: 6px 8px;
  max-width: 190px;
}

.rebus__stats { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.rebus__stat { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 10px; text-align: center; }
.rebus__stat b { display: block; font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.rebus__stat span { font-size: 11px; color: var(--text-muted); letter-spacing: .08em; }

.rebus__ranks { list-style: none; margin: 0; padding: 0; }
.rebus__rank { display: flex; align-items: center; gap: var(--space-3); padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 14px; }
.rebus__rank:last-child { border-bottom: none; }
.rebus__rank.is-you { background: rgba(99, 230, 180, .07); border-left: 2px solid var(--hit); padding-left: 8px; }
.rebus__rank .pos { color: var(--text-muted); font-size: 12px; width: 18px; font-variant-numeric: tabular-nums; }
.rebus__rank .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rebus__rank .pop { color: var(--text-muted); font-size: 12px; }
.rebus__rank .rate { font-variant-numeric: tabular-nums; width: 44px; text-align: right; }
.rebus__board-note { font-size: 12px; color: var(--text-muted); margin-top: var(--space-4); }

/* --- onboarding overlay ------------------------------------------------- */

.rebus__veil {
  position: fixed;
  inset: 0;
  background: rgba(9, 7, 18, .82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 60;
}
.rebus__veil.is-open { display: flex; }

.rebus__primer {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-5);
  width: 100%;
  max-width: 400px;
  max-height: 88vh;
  overflow-y: auto;
}
.rebus__primer h2 { font-family: var(--font-serif); font-size: 25px; font-weight: 400; line-height: 1.2; margin-bottom: var(--space-2); }
.rebus__primer p { font-size: 14px; color: var(--text-muted); margin-bottom: var(--space-5); }
.rebus__demo { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px 16px; margin-bottom: var(--space-5); }
.rebus__demo-glyphs { display: flex; justify-content: center; gap: 36px; margin-bottom: var(--space-4); }
.rebus__demo-sort { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rebus__demo-mark { font-family: var(--glyph-stack); font-size: 38px; line-height: 1; }
.rebus__demo-word { font-size: 12px; letter-spacing: .1em; color: var(--hit); }
.rebus__demo-phrase { font-family: var(--font-serif); font-size: 21px; text-align: center; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.rebus__key-note { font-size: 12px; color: var(--text-muted); text-align: center; margin: 6px 0 var(--space-4); }

/* --- archive ------------------------------------------------------------ */

.rebus__explain {
  max-width: var(--max-prose);
  margin: var(--space-7) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.rebus__explain h2 { font-family: var(--font-serif); font-weight: 400; margin-bottom: var(--space-3); }
.rebus__explain p { margin-bottom: var(--space-4); }
.rebus__breakdown { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.rebus__breakdown li { display: flex; align-items: baseline; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--border); }
.rebus__breakdown .g { font-family: var(--glyph-stack); font-size: 26px; min-width: 40px; }

.rebus__list { list-style: none; margin: 0; padding: 0; }
.rebus__list li { border-bottom: 1px solid var(--border); }
.rebus__list a { display: flex; align-items: center; gap: var(--space-4); padding: 12px 4px; text-decoration: none; }
.rebus__list .n { color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 34px; }
.rebus__list .g { font-family: var(--glyph-stack); font-size: 22px; letter-spacing: .18em; min-width: 74px; }
.rebus__list .a { color: var(--text); flex: 1; }
.rebus__list .d { color: var(--text-faint); font-size: 12px; }

/* Reserve the ad slot so a late-loading unit cannot shift the page under the reader.
   Height matches a responsive display unit's usual minimum. */
.rebus__ads { min-height: 280px; margin: var(--space-7) auto 0; max-width: var(--max-prose); }

/* --- glyph reference ---------------------------------------------------- */

.glyph-hero { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-6); }
.glyph-hero .big { font-family: var(--glyph-stack); font-size: 72px; line-height: 1; }
.glyph-facts { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); }
.glyph-facts th, .glyph-facts td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: top; }
.glyph-facts th { color: var(--text-muted); font-weight: 400; width: 40%; }
.glyph-facts td { font-family: var(--font-mono); }
.glyph-facts .copy { cursor: pointer; }
.glyph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.glyph-grid a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-muted);
  font-size: 11px;
  text-align: center;
}
.glyph-grid a:hover { border-color: var(--border-strong); color: var(--text); }
.glyph-grid .c { font-family: var(--glyph-stack); font-size: 26px; color: var(--text); }

/* --- shared ------------------------------------------------------------- */

.rebus a:focus-visible,
.rebus button:focus-visible,
.rebus input:focus-visible,
.rebus select:focus-visible,
.glyph-grid a:focus-visible {
  outline: 2px solid var(--hit);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .rebus__gloss { transition: none; }
  .rebus__line.is-wrong { animation: none; }
}

/* The game page has no visible title — the symbols are the product and a heading above
   them would push them down. The h1 still has to exist for crawlers and screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- puzzle header ------------------------------------------------------ */
/* Deliberately light: nothing above the glyph row may push it down the page. The
   symbols are the product, so this is one short line and a 26px button. */
.rebus__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-5);
}
.rebus__edition { font-size: 13px; color: var(--text-muted); letter-spacing: .06em; }
.rebus__help {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  width: 26px;
  height: 26px;
  padding: 0;
  line-height: 1;
  cursor: pointer;
}
.rebus__help:hover { color: var(--text); border-color: var(--text); }