/* 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; }

/* --- touch controls (overworld only; shown on touch/coarse-pointer devices) --- */
#touch {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  pointer-events: none;          /* container ignores taps; the buttons re-enable them */
  z-index: 5;
}
#touch[hidden] { display: none; }
#touch button {
  pointer-events: auto;
  position: absolute;
  font-family: inherit;
  font-weight: 700;
  color: #F5F0E8;
  background: #2A6B6B;
  border: 2px solid #5C5C5C;
  opacity: 0.8;
  font-size: 22px;
  line-height: 1;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
}
#touch button:active { background: #C17B4A; opacity: 0.95; }
/* D-pad, bottom-left. 3x3 footprint, only the arms filled. */
#touch .dpad-up    { left: 52px;  bottom: 96px; width: 44px; height: 44px; }
#touch .dpad-down  { left: 52px;  bottom: 8px;  width: 44px; height: 44px; }
#touch .dpad-left  { left: 8px;   bottom: 52px; width: 44px; height: 44px; }
#touch .dpad-right { left: 96px;  bottom: 52px; width: 44px; height: 44px; }
/* action (look / speak), bottom-right */
#touch .act { right: 14px; bottom: 30px; width: 66px; height: 66px; border-radius: 50%; font-size: 18px; }

@media (max-width: 480px) {
  #touch .dpad-up    { left: 48px;  bottom: 84px; width: 40px; height: 40px; }
  #touch .dpad-down  { left: 48px;  bottom: 6px;  width: 40px; height: 40px; }
  #touch .dpad-left  { left: 8px;   bottom: 45px; width: 40px; height: 40px; }
  #touch .dpad-right { left: 88px;  bottom: 45px; width: 40px; height: 40px; }
  #touch .act        { right: 12px; bottom: 24px; width: 60px; height: 60px; }
}

/* --- 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 */
}

/* JRPG dialogue face window: a framed portrait beside the speaker's text */
#portrait {
  float: left;
  width: 88px;
  height: 88px;
  margin: 2px 14px 8px 0;
  border: 3px solid #5C5C5C;
  box-shadow: 3px 3px 0 #2A6B6B;
  background: #F5F0E8;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#portrait[hidden] { display: none; }

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

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

@media (max-width: 480px) {
  #portrait { width: 68px; height: 68px; margin-right: 10px; }
}

/* --- 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;
}

button.choice.disabled, button.choice:disabled {
  color: #8A8A82;
  border-color: #8A8A82;
  box-shadow: 3px 3px 0 #8A8A82;
  cursor: not-allowed;
  opacity: 0.7;
}
button.choice.disabled:hover, button.choice:disabled:hover {
  background: #F5F0E8;
  color: #8A8A82;
}

/* --- 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; }
}