/* wc-souffle , a terminal that happens to be a birthday card.
   Amber on warm dark, matching the LEDs on the board itself. */

:root {
  --bg:       #131009;
  --bg-lift:  #1a160e;
  --panel:    #1e1911;
  --line:     #2e2718;
  --fg:       #ece1cd;
  --fg-soft:  #b9a888;
  --dim:      #8a7a5e;
  --amber:    #ffb224;
  --amber-hi: #ffc75c;
  --amber-lo: #b8801a;
  --ok:       #9fce6a;
  --err:      #f4808f;

  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;

  --step: 0.5rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 7vh, 5rem) 1.25rem 2rem;
  background: var(--bg);
  /* a very faint warm pool behind the content, like the board's own glow */
  background-image:
    radial-gradient(90rem 40rem at 50% -12rem, #241c10 0%, transparent 62%);
  color: var(--fg);
  font: 400 16px/1.65 var(--mono);
  font-variant-ligatures: none;
}

main {
  width: 100%;
  max-width: 44rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* short states sit centred, long ones fill */
}

section { animation: rise .4s var(--ease) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
}

/* ---------------------------------------------------------- type scale */
h1 {
  margin: 0 0 var(--step);
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--amber);
}
h1.huge {
  font-size: clamp(2.75rem, 13vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: .14em;
  margin: .35rem 0 1.25rem;
  text-shadow: 0 0 44px rgba(255, 178, 36, .3);
}
h2 {
  margin: 2rem 0 var(--step);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--amber);
}
h1.err, .err { color: var(--err); text-shadow: none; }

p { margin: 0 0 1rem; }
.lead     { max-width: 38rem; color: var(--fg); }
.note     { max-width: 38rem; color: var(--dim); font-size: .8438rem; line-height: 1.6; }
.dim      { color: var(--dim); }
.ok       { color: var(--ok); }
b, strong { color: var(--fg); font-weight: 600; }
code {
  font-size: .9em;
  color: var(--amber-hi);
  background: rgba(255, 178, 36, .08);
  padding: .1em .35em;
  border-radius: 2px;
}

.crumb {
  margin: 0 0 1.5rem;
  font-size: .7813rem;
  letter-spacing: .09em;
  color: var(--dim);
}
.crumb.ok { color: var(--ok); }

.error {
  margin: 1.25rem 0 0;
  padding: .8rem 1rem;
  border-left: 2px solid var(--err);
  background: rgba(244, 128, 143, .07);
  color: var(--err);
  font-size: .9063rem;
  line-height: 1.6;
  border-radius: 0 3px 3px 0;
  animation: rise .3s var(--ease) both;
}
.error b { color: var(--err); }
/* amber-on-red reads as a mistake; keep inline code neutral inside errors */
.error code {
  color: #ffd2d9;
  background: rgba(244, 128, 143, .14);
}

/* ------------------------------------------------------------- buttons */
button {
  font: inherit;
  font-size: .9688rem;
  padding: .72rem 1.45rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .08s var(--ease);
}
button:active { transform: translateY(1px); }
button[disabled] {
  cursor: progress;
  opacity: .62;
  transform: none;
  box-shadow: none;
}
button:focus-visible {
  outline: 2px solid var(--amber-hi);
  outline-offset: 3px;
}

.primary {
  background: var(--amber);
  border: 1px solid var(--amber);
  color: #1a1206;
  font-weight: 600;
  box-shadow: 0 0 0 rgba(255, 178, 36, 0);
}
.primary:hover {
  background: var(--amber-hi);
  border-color: var(--amber-hi);
  box-shadow: 0 0 26px rgba(255, 178, 36, .28);
}

.ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--amber);
}
.ghost:hover { border-color: var(--amber-lo); background: rgba(255, 178, 36, .05); }

/* ------------------------------------------------------------ bit row */
.bits {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: .45rem;
  margin: 1.4rem 0 1.1rem;
  max-width: 32rem;
}
.bit {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-lift);
  transition: background .18s var(--ease), border-color .18s var(--ease),
              box-shadow .18s var(--ease);
}
.bit .w { font-size: .6563rem; color: var(--dim); transition: color .18s; }
.bit .v { font-size: 1.05rem; color: #4a4030; transition: color .18s; }
.bit.on {
  background: rgba(255, 178, 36, .14);
  border-color: var(--amber);
  box-shadow: 0 0 20px rgba(255, 178, 36, .22), 0 0 0 1px rgba(255,178,36,.25);
}
.bit.on .v { color: var(--amber); }
.bit.on .w { color: var(--amber-lo); }

.hex {
  font-size: 1.15rem;
  margin: 0 0 1.1rem;
  letter-spacing: .02em;
}
.hex #hexval {
  color: var(--amber);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------- celebration
   The one screen that gets to be a moment rather than a terminal. */
#s-celebrate { text-align: center; }
#s-celebrate .lead,
#s-celebrate .note { max-width: none; }
#s-celebrate h1.huge { margin: 1.25rem 0 .75rem; }

.candles {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1.05rem;
  width: fit-content;
  margin: 0 auto;
  padding: 2.25rem 2.5rem;
}
.candles::before {
  content: "";
  position: absolute;
  inset: -60% -45%;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(255, 178, 36, .22), transparent 72%);
  pointer-events: none;
}
.candles i {
  position: relative;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff3d4 0%, var(--amber-hi) 38%,
              var(--amber) 70%, var(--amber-lo) 100%);
  box-shadow: 0 0 18px var(--amber), 0 0 44px rgba(255, 178, 36, .55);
  animation: flick var(--dur, 1.2s) infinite ease-in-out;
}
@keyframes flick {
  0%, 100% { opacity: 1;   transform: scale(1); }
  38%      { opacity: .58; transform: scale(.9); }
  63%      { opacity: .92; transform: scale(1.04); }
}

/* ------------------------------------------------------------ message */
.message {
  margin: 0 0 1rem;
  padding: 1.35rem 1.6rem;
  border-left: 2px solid var(--amber);
  border-radius: 0 4px 4px 0;
  background: var(--panel);
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  min-height: 5rem;
}
.message::after {
  content: "\2588";
  margin-left: 1px;
  color: var(--amber);
  animation: blink 1.05s step-end infinite;
}
.message.done::after { content: ""; }
@keyframes blink { 50% { opacity: 0; } }

/* -------------------------------------------------------------- hints */
.hints { margin-top: 2.25rem; }
.hint {
  margin: .7rem 0;
  padding: .8rem 1.05rem;
  border-left: 2px solid var(--amber-lo);
  border-radius: 0 3px 3px 0;
  background: rgba(255, 178, 36, .055);
  color: var(--fg-soft);
  font-size: .9063rem;
  line-height: 1.7;
  animation: rise .32s var(--ease) both;
}
.hint b { color: var(--amber); }
.hint-btn {
  margin-top: .3rem;
  padding: .5rem 1.05rem;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--dim);
  font-size: .8438rem;
}
.hint-btn:hover { color: var(--amber); border-color: var(--amber-lo); }

/* --------------------------------------------------------------- misc */
.checklist { margin: 1.1rem 0; padding: 0; list-style: none; }
.checklist li {
  margin: .45rem 0;
  display: flex;
  gap: .8rem;
  align-items: baseline;
  font-size: .9375rem;
}
.checklist .tag {
  flex: none;
  min-width: 3.4rem;
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ok);
}
.checklist .tag.no { color: var(--err); }

.gestures { width: 100%; border-collapse: collapse; margin: 1rem 0 1.25rem; }
.gestures td {
  padding: .42rem 1rem .42rem 0;
  vertical-align: top;
  font-size: .9063rem;
  border-bottom: 1px solid rgba(46, 39, 24, .55);
}
.gestures tr:last-child td { border-bottom: 0; }
.gestures td:first-child { width: 12.5rem; color: var(--amber); white-space: nowrap; }

.rule { height: 1px; margin: 2.25rem 0; background: var(--line); }

/* the caveat under "read it again" needs room to breathe */
#btn-again + .note { margin-top: 1.1rem; }
/* buttons need air before the small print that follows them */
button + .note { margin-top: 1.1rem; }

footer {
  margin-top: 3.5rem;
  font-size: .6875rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --------------------------------------------------------- responsive */
@media (max-width: 34rem) {
  body { font-size: 15px; }
  .bits { gap: .28rem; }
  .bit .v { font-size: .8125rem; }
  .bit .w { font-size: .5625rem; }
  .gestures td:first-child { width: auto; white-space: normal; padding-right: .75rem; }
  .message { padding: 1.1rem 1.15rem; }
}

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


/* ---------------------------------------------------- the hardware page */
.doc { max-width: 46rem; justify-content: flex-start; }
.doc h1 { margin-bottom: 1rem; }
h3 {
  margin: 1.5rem 0 .4rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--fg);
}
a { color: var(--amber); text-decoration-color: var(--amber-lo); }
a:hover { color: var(--amber-hi); }
.footlink { margin-top: 2rem; }

.dl { list-style: none; margin: 1rem 0; padding: 0; }
.dl li {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  align-items: baseline;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(46, 39, 24, .55);
}
.dl li:last-child { border-bottom: 0; }
.dl a { flex: none; font-weight: 600; }
.dl .dim { font-size: .8438rem; }

pre.code {
  margin: .75rem 0 1rem;
  padding: .9rem 1.1rem;
  background: var(--panel);
  border-left: 2px solid var(--amber-lo);
  border-radius: 0 3px 3px 0;
  overflow-x: auto;
  font-size: .8125rem;
  line-height: 1.65;
  color: var(--fg-soft);
  white-space: pre;
  max-height: 34rem;
  overflow-y: auto;
}