/* Hangman - the dispensary bench, under the same brass lamp as the rest. */

:root {
  --ink:        #12100C;
  --parchment:  #F0E4CC;
  --parchment-2:#C3B294;
  --parchment-3:#8B7C64;
  --brass:      #C79A45;
  --brass-2:    #8A6C31;
  --crimson:    #A9342B;
  --verdigris:  #3FA97A;

  --shell: 1px solid color-mix(in srgb, var(--brass) 34%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color: var(--parchment);
  background:
    radial-gradient(130% 90% at 50% -20%, #33281D 0%, #1D1710 46%, #0D0A07 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------- layout -- */

.page {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 18px);
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  max-width: 880px;
  margin-inline: auto;
}

/* ----------------------------------------------------------- masthead -- */

.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
}

.masthead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  min-width: 0;
}

.backlink {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--parchment-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.backlink::before { content: '\27F5\2003'; }
.backlink:hover {
  color: var(--brass);
  border-bottom-color: color-mix(in srgb, var(--brass) 50%, transparent);
}

.title {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 50, 'opsz' 120, 'wght' 620;
  font-weight: 620;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1;
  margin: 0;
  letter-spacing: -.015em;
  text-shadow: 0 1px 0 #000, 0 0 34px rgba(199, 154, 69, .18);
}

.stamp {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass);
}
.stamp__rule {
  width: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-2), transparent);
}

/* --------------------------------------------------------------- tiers -- */

.tiers {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: var(--shell);
  border-radius: 3px;
  background: rgba(9, 7, 5, .4);
}

.chip {
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--parchment-3);
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 7px 13px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.chip:hover { color: var(--brass); }
.chip[aria-pressed='true'] {
  color: var(--ink);
  background: var(--brass);
  border-color: var(--brass);
}
.chip:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.shelfnote {
  margin: -4px 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'ital' 1, 'wght' 500;
  font-style: italic;
  font-size: 13px;
  color: var(--parchment-3);
  text-align: center;
}

/* --------------------------------------------------------------- bench -- */

.bench {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vw, 40px);
}

.scaffold {
  flex: 0 1 260px;
  display: grid;
  place-items: center;
  min-width: 0;
}

.gallows {
  width: 100%;
  max-width: 210px;
  height: auto;
  max-height: 34vh;
}
.gallows__frame { stroke: var(--brass-2); }
.gallows__figure { stroke: var(--parchment); }

/* Each limb draws itself on, rather than blinking into existence. */
.limb {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset .45s ease-out, opacity .05s linear;
}
.limb.is-drawn { stroke-dashoffset: 0; opacity: 1; }

.gallows.is-lost .gallows__figure { stroke: var(--crimson); transition: stroke .5s; }

/* ------------------------------------------------------------ discards -- */

.discards {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: var(--shell);
  border-radius: 3px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 60%),
    rgba(9, 7, 5, .4);
}

.discards__title {
  margin: 0;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brass-2);
  text-align: center;
}

.discards__slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.slot {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'wght' 600;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--crimson);
  border: 1px dashed rgba(199, 154, 69, .28);
  border-radius: 2px;
  background: rgba(0, 0, 0, .25);
}
.slot.is-filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--crimson) 55%, transparent);
  background: rgba(169, 52, 43, .12);
  box-shadow: inset 0 0 12px -6px var(--crimson);
}
.slot.is-struck { animation: struck .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes struck {
  0%   { transform: scale(.6) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: none; }
}

.discards__note {
  margin: 0;
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--parchment-3);
  text-align: center;
}
.discards__note span { color: var(--parchment); }

/* ---------------------------------------------------------------- word -- */

.word {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  width: 100%;
  min-height: 1.6em;
}

.letter {
  min-width: clamp(24px, 5.4vw, 36px);
  /* An unguessed letter has no text, and an empty flex item is zero high, so
     the underline would sit on the baseline of nothing. Hold the line box open
     rather than stuffing a space into the markup. */
  min-height: 1.15em;
  padding-bottom: 6px;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 50, 'wght' 620;
  font-size: clamp(1.6rem, 5.6vw, 2.4rem);
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
  border-bottom: 3px solid var(--brass-2);
  animation: land .3s cubic-bezier(.3, 1.3, .5, 1);
}
.letter.is-blank {
  color: transparent;
  animation: none;
  border-bottom-color: rgba(199, 154, 69, .38);
}
/* A spent round: the letters found stay, the rest keep their secret. */
.letter.is-spent { border-bottom-color: color-mix(in srgb, var(--crimson) 60%, transparent); }

@keyframes land {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.verdict {
  margin: 0;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--crimson);
  text-align: center;
}

/* ---------------------------------------------------------------- keys -- */

.keys {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
  max-width: 620px;
}

.key {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  aspect-ratio: 1;
  color: var(--parchment-2);
  background: rgba(255, 255, 255, .02);
  border: var(--shell);
  border-radius: 2px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .08s;
}
.key:hover:not(:disabled) {
  color: var(--ink);
  background: var(--brass);
  border-color: var(--brass);
}
.key:active:not(:disabled) { transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

.key:disabled { cursor: default; }
.key.is-hit {
  color: var(--ink);
  background: var(--verdigris);
  border-color: var(--verdigris);
  opacity: .85;
}
.key.is-miss {
  color: color-mix(in srgb, var(--crimson) 80%, var(--parchment-3));
  border-color: rgba(169, 52, 43, .3);
  background: none;
  text-decoration: line-through;
}
/* Untried letters left over when the game ends: dim, not struck out. */
.key:disabled:not(.is-hit):not(.is-miss) { opacity: .28; }

/* ------------------------------------------------------------- console -- */

.console {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(199, 154, 69, .16);
}

.counter { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.counter__label {
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--parchment-3);
}
.counter b {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'wght' 600;
  font-size: 1.3rem;
  color: var(--parchment);
  font-variant-numeric: tabular-nums;
}
.counter__sub {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-2);
}

.actions { display: flex; gap: 6px; flex-wrap: wrap; }

.btn {
  font: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--parchment-2);
  background: rgba(255, 255, 255, .015);
  border: var(--shell);
  border-radius: 2px;
  padding: 9px 12px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, transform .1s;
}
.btn:hover:not(:disabled) {
  color: var(--ink);
  background: var(--brass);
  border-color: var(--brass);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .3; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn[aria-pressed='false'] { color: var(--parchment-3); border-style: dashed; }

/* Once the six are spent, the way out should be the thing you notice. */
#reset:not(:disabled) {
  color: var(--brass);
  border-color: var(--brass);
  animation: beckon 2.4s ease-in-out infinite;
}
@keyframes beckon {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 154, 69, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(199, 154, 69, .12); }
}

/* --------------------------------------------------------------- howto -- */

.howto {
  width: 100%;
  font-size: 12px;
  line-height: 1.65;
  color: var(--parchment-2);
}
.howto summary {
  cursor: pointer;
  list-style: none;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--parchment-3);
  padding: 4px 0;
  transition: color .2s;
}
.howto summary::-webkit-details-marker { display: none; }
.howto summary::before { content: '\FF0B\2002'; color: var(--brass-2); }
.howto[open] summary::before { content: '\FF0D\2002'; }
.howto summary:hover { color: var(--brass); }
.howto ul { margin: 10px 0; padding-left: 1.1em; }
.howto li { margin-bottom: 5px; }
.howto b { color: var(--parchment); font-weight: 500; }
.howto__note {
  color: var(--parchment-3);
  border-left: 1px solid var(--brass-2);
  padding-left: 12px;
  max-width: 62ch;
}

/* ----------------------------------------------------------------- win -- */

.win {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 8, 5, .72);
  backdrop-filter: blur(7px) saturate(.8);
  -webkit-backdrop-filter: blur(7px) saturate(.8);
  animation: fade .4s ease both;
}
.win.is-instant { animation: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.win__card {
  position: relative;
  width: min(400px, 100%);
  text-align: center;
  padding: 46px 30px 30px;
  color: #2A2117;
  border-radius: 3px;
  background:
    radial-gradient(120% 90% at 50% 0%, #FBF2DF 0%, #EFE1C4 60%, #E2D2B2 100%);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, .8),
    inset 0 0 0 1px rgba(255, 255, 255, .5),
    inset 0 0 0 6px rgba(169, 52, 43, .07);
  animation: rise .5s cubic-bezier(.25, 1.2, .4, 1) both;
}
.win.is-instant .win__card { animation: none; }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.seal {
  position: absolute;
  top: -26px;
  left: 50%;
  width: 62px;
  height: 62px;
  transform: translateX(-50%) rotate(-8deg);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(255, 226, 216, .78);
  font-size: 22px;
  background: radial-gradient(circle at 34% 28%, #C4463A, #8E2A22 62%, #6E1E18 100%);
  box-shadow:
    inset 0 -3px 8px rgba(0, 0, 0, .5),
    inset 0 3px 6px rgba(255, 255, 255, .25),
    0 8px 16px -6px rgba(0, 0, 0, .7);
  clip-path: polygon(
    50% 0%, 66% 6%, 82% 4%, 92% 18%, 100% 32%, 96% 50%, 100% 68%, 90% 82%,
    80% 96%, 62% 96%, 46% 100%, 30% 94%, 16% 90%, 8% 74%, 0% 56%, 4% 38%,
    2% 20%, 18% 10%, 34% 6%);
}

.win__card h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 50, 'opsz' 140, 'wght' 700;
  font-size: 2.1rem;
  margin: 6px 0 4px;
  letter-spacing: -.01em;
}

.win__word {
  margin: 0 0 16px;
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'ital' 1, 'wght' 500;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: #7A6244;
}

.win__line { margin: 0 0 22px; font-size: 12px; line-height: 1.8; color: #574734; }
.win__line b { color: #2A2117; font-weight: 600; }

.win__next {
  margin: 0 0 22px;
  padding: 12px 0;
  border-top: 1px solid rgba(42, 33, 23, .16);
  border-bottom: 1px solid rgba(42, 33, 23, .16);
}
.win__next-label {
  display: block;
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #8A7458;
  margin-bottom: 6px;
}
.win__clock {
  font-size: 1.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: #2A2117;
}

.win__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.btn--ink {
  color: #574734;
  border-color: rgba(42, 33, 23, .3);
  background: transparent;
}
.btn--ink:hover:not(:disabled) {
  background: #2A2117;
  border-color: #2A2117;
  color: #EFE1C4;
}

/* The way onward. Filled rather than outlined so it reads as the one thing to
   do next, with an arrow that leans the way it goes and takes a step on hover.
   Which shelf it leads to is on the chips behind the card, so the face of the
   button stays a single word and the tier name rides on the label. */
.btn--next {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-inline: 14px;
  color: #F2E6CE;
  background: linear-gradient(180deg, #493A29 0%, #2A2117 100%);
  border-color: #2A2117;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 3px 7px -3px rgba(42, 33, 23, .7);
}
.btn--next:hover:not(:disabled) {
  color: #FBF2DF;
  background: linear-gradient(180deg, #5B4934 0%, #372B1D 100%);
  border-color: #2A2117;
}
.btn--next:focus-visible { outline-color: #8E2A22; }

.btn__arrow {
  margin-block: -1px; /* optical: the rule sits on the cap height, not below it */
  transition: transform .2s cubic-bezier(.25, 1.2, .4, 1);
}
.btn--next:hover:not(:disabled) .btn__arrow { transform: translateX(3px); }
.btn--next:active:not(:disabled) .btn__arrow { transform: translateX(1px); }

/* -------------------------------------------------------------- motion -- */

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

@media (max-width: 620px) {
  .page { padding-inline: 10px; }
  .topbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .masthead { justify-content: center; gap: 4px 12px; }
  .stamp { justify-content: center; letter-spacing: .18em; }
  .stamp__rule { display: none; }
  .tiers { width: 100%; }
  .chip { flex: 1 1 0; min-width: 0; padding: 8px 4px; letter-spacing: .04em; }

  .bench { gap: 14px; align-items: center; }
  .gallows { max-height: 30vh; }
  .discards__slots { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .slot { width: 34px; height: 34px; font-size: 1.05rem; }

  .keys { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .console { flex-direction: column; align-items: stretch; }
  .counter { justify-content: center; }
  .actions { justify-content: center; }
}

@media (max-width: 380px) {
  .bench { flex-direction: column; }
  .discards__slots { grid-template-columns: repeat(6, 1fr); }
}

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

/* The written half of the page: what the game is, and the way out to the
   others. Below the fold by design — the game gets the first screen. */
.ledger {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px calc(56px + env(safe-area-inset-bottom));
  display: grid;
  gap: 34px;
  border-top: 1px solid rgba(199, 154, 69, .16);
  font-size: 13px;
  line-height: 1.85;
  color: var(--parchment-2);
}

.ledger h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-variation-settings: 'SOFT' 50, 'opsz' 90, 'wght' 600;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--parchment);
  letter-spacing: -.01em;
}

.ledger p { margin: 0 0 14px; }
.ledger p:last-child { margin-bottom: 0; }
.ledger strong { color: var(--parchment); font-weight: 500; }
.ledger em { color: var(--brass); font-style: italic; }

.ledger__more ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ledger__more li {
  padding-left: 14px;
  border-left: 1px solid rgba(199, 154, 69, .22);
}
.ledger a {
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.ledger a:hover { border-bottom-color: var(--brass); }
.ledger__home { margin-top: 18px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }

/* Spans both columns: the legal line belongs to the page, not to either half
   of it. Quieter than the links above — it is there to be found, not read. */
.ledger__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(199, 154, 69, .12);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ledger__legal a { color: var(--parchment-3); }
.ledger__legal a:hover { color: var(--brass); }

@media (min-width: 760px) {
  .ledger { max-width: 940px; grid-template-columns: 1.7fr 1fr; gap: 48px; }
}