/* Just This Once — Slow AI retro adventure styles.
   Six brand colours only:
   cream #F5F0E8, graphite #5C5C5C, teal #2A6B6B,
   slate #6E8CA0, moss #5A7A5A, clay #C17B4A */

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

html, body {
  height: 100%;
  overflow: hidden;               /* itch-embed friendly; the text panel scrolls */
}

body {
  background: #F5F0E8;
  color: #5C5C5C;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

#app {
  height: 100%;
  display: flex;
  justify-content: center;
  padding: 10px;
}

#frame {
  width: 100%;
  max-width: 700px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 4px solid #5C5C5C;
  box-shadow: 6px 6px 0 #2A6B6B;
  background: #F5F0E8;
  position: relative;
}

/* --- scene ---------------------------------------------------------- */

#scene-wrap {
  position: relative;
  flex: 0 0 auto;
  background: #F5F0E8;
  border-bottom: 4px solid #5C5C5C;
  line-height: 0;
}

canvas#scene {
  display: block;
  width: 100%;
  max-height: 44vh;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #F5F0E8;
  margin: 0 auto;
}

#mute {
  position: absolute;
  top: 6px;
  right: 6px;
  font-family: inherit;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #F5F0E8;
  background: #5C5C5C;
  border: 2px solid #5C5C5C;
  padding: 4px 8px;
  cursor: pointer;
}
#mute:hover, #mute:focus-visible { background: #2A6B6B; border-color: #2A6B6B; }

/* --- label bar ------------------------------------------------------- */

#label {
  flex: 0 0 auto;
  background: #5C5C5C;
  color: #F5F0E8;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 5px 12px;
  border-bottom: 4px solid #5C5C5C;
}

/* --- text panel ------------------------------------------------------- */

#panel {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 64px;      /* interactive elements stay well off the bottom */
}

#text p { margin: 0 0 12px; }

#text p:last-child { margin-bottom: 4px; }

/* --- choices ----------------------------------------------------------- */

#choices { margin-top: 6px; }

button.choice, a.choice {
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: #5C5C5C;
  background: #F5F0E8;
  border: 3px solid #5C5C5C;
  box-shadow: 3px 3px 0 #5C5C5C;
  padding: 10px 12px;
  margin: 0 0 12px;
  cursor: pointer;
  text-decoration: none;
}

button.choice:hover, a.choice:hover,
button.choice:focus-visible, a.choice:focus-visible {
  background: #2A6B6B;
  color: #F5F0E8;
  border-color: #2A6B6B;
  outline: none;
}

button.choice:active, a.choice:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #5C5C5C;
}

button.choice.primary {
  border-color: #2A6B6B;
  color: #2A6B6B;
  box-shadow: 3px 3px 0 #2A6B6B;
}
button.choice.primary:hover, button.choice.primary:focus-visible {
  background: #2A6B6B;
  color: #F5F0E8;
}

/* --- judgement card ------------------------------------------------------ */

.call {
  border: 3px solid #5C5C5C;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.call-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.call-when {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: #2A6B6B;
}

.chip {
  font-size: 11px;
  letter-spacing: 0.08em;
  border: 2px solid #5C5C5C;
  padding: 1px 6px;
  color: #5C5C5C;
  background: #F5F0E8;
}

.chip-served { border-color: #5A7A5A; }
.chip-cost   { border-color: #C17B4A; }
.chip-mixed  { border-color: #6E8CA0; }

.call-line { font-size: 14px; }

.totals {
  margin: 16px 0 12px;
  padding: 10px 12px;
  border: 3px solid #2A6B6B;
  color: #2A6B6B;
  font-size: 14px;
}

.closing { margin: 0 0 12px; }

.funnel {
  margin-top: 48px;              /* a clear beat after Go slow. */
  border-top: 4px solid #5C5C5C;
  padding-top: 18px;
}

.funnel p { margin: 0 0 12px; }

a.choice.linkish { color: #2A6B6B; border-color: #2A6B6B; box-shadow: 3px 3px 0 #2A6B6B; }
a.choice.linkish:hover, a.choice.linkish:focus-visible { background: #2A6B6B; color: #F5F0E8; }

.endings-count {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: #5C5C5C;
  padding: 2px 0 8px;
}

/* --- accessibility helpers ------------------------------------------------ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 3px solid #C17B4A; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  button.choice:active, a.choice:active { transform: none; }
}

/* --- small screens ---------------------------------------------------------- */

@media (max-width: 480px) {
  #app { padding: 0; }
  #frame { border-width: 3px; box-shadow: none; }
  body { font-size: 15px; }
  canvas#scene { max-height: 36vh; }
}

/* squat embeds (itch 640x480): keep the scene modest, let text breathe */
@media (max-height: 540px) {
  canvas#scene { max-height: 34vh; }
  #panel { padding-bottom: 62px; }
}