/* ============================================================
   CHRONOFALL — 06 / TRANSMISSION — "SIXTY SECONDS TO SPEND"
   Neon terminal panel for the branching text adventure.
   Mobile-first: base styles target ~360px, scale up after.
   ============================================================ */

.story { position: relative; }

/* ---------- Terminal panel ---------- */
.story-terminal {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
  border: 1px solid rgba(168, 85, 247, .45);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(168, 85, 247, .08), rgba(7, 4, 13, 0) 30%),
    radial-gradient(120% 90% at 50% 0%, rgba(107, 33, 168, .22), transparent 60%),
    #0a0614;
  box-shadow:
    0 0 30px rgba(168, 85, 247, .25),
    0 0 90px rgba(168, 85, 247, .12),
    inset 0 0 40px rgba(107, 33, 168, .12);
  overflow: hidden;
}
.story-terminal:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}
/* scanlines */
.story-terminal::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(240, 171, 252, .03) 0px,
    rgba(240, 171, 252, .03) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
}

/* ---------- Title bar ---------- */
.story-terminal__bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid rgba(168, 85, 247, .3);
  background: rgba(107, 33, 168, .12);
}
.story-terminal__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--purple-deep);
  box-shadow: 0 0 8px rgba(168, 85, 247, .8);
}
.story-terminal__dot:nth-child(2) { background: var(--purple); }
.story-terminal__dot:nth-child(3) { background: var(--pink); }
.story-terminal__label {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: .5rem;
  letter-spacing: .25em;
  color: var(--purple-soft);
  text-shadow: 0 0 8px rgba(168, 85, 247, .8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Seconds meter ---------- */
.story-meter {
  padding: .9rem .9rem .2rem;
}
.story-meter__head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .45rem;
}
.story-meter__label {
  font-family: var(--font-display);
  font-size: .55rem;
  letter-spacing: .3em;
  color: var(--text-dim);
}
.story-meter__delta {
  font-family: var(--font-display);
  font-size: .65rem;
  letter-spacing: .1em;
  color: var(--pink);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .3s, transform .3s;
}
.story-meter__delta.is-on { opacity: 1; transform: none; }
.story-meter__delta.is-gain { color: #a7f3d0; }
.story-meter__value {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  text-shadow: 0 0 14px rgba(168, 85, 247, .9), 0 0 40px rgba(168, 85, 247, .5);
  font-variant-numeric: tabular-nums;
}
.story-meter__bar {
  height: 10px;
  border: 1px solid rgba(168, 85, 247, .4);
  border-radius: 999px;
  background: rgba(7, 4, 13, .8);
  overflow: hidden;
}
.story-meter__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple-deep), var(--purple), var(--pink));
  box-shadow: 0 0 12px var(--purple), 0 0 26px rgba(168, 85, 247, .7);
  transition: width .6s cubic-bezier(.2, .7, .2, 1);
}
/* low-time state: the panel starts to worry */
.story-terminal.is-low .story-meter__fill {
  background: linear-gradient(90deg, var(--purple), var(--pink));
  animation: story-low-pulse 1s ease-in-out infinite;
}
.story-terminal.is-low .story-meter__value { color: var(--pink); }
@keyframes story-low-pulse {
  0%, 100% { box-shadow: 0 0 10px var(--pink); }
  50%      { box-shadow: 0 0 26px var(--pink), 0 0 50px rgba(240, 171, 252, .8); }
}

/* ---------- Screen / prose ---------- */
.story-screen {
  padding: 1.2rem .9rem 1rem;
}
.story-text {
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.85;
  color: var(--text);
  min-height: 13.5em; /* keeps the panel from jumping while text types */
  text-shadow: 0 0 18px rgba(168, 85, 247, .25);
}
/* full text for screen readers, delivered at once */
.story-text__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* blinking caret */
.story-caret {
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .15em;
  vertical-align: text-bottom;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink), 0 0 24px rgba(240, 171, 252, .7);
  animation: story-caret-blink 1s steps(1, end) infinite;
}
@keyframes story-caret-blink {
  0%, 49%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---------- Choices ---------- */
.story-out { outline: none; }
.story-choices {
  display: grid;
  gap: .6rem;
  margin-top: 1.3rem;
}
.story-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 48px; /* comfortable touch target */
  padding: .85rem 1rem;
  font-family: var(--font-display);
  font-size: .62rem;
  letter-spacing: .14em;
  text-align: left;
  color: var(--text);
  background: rgba(168, 85, 247, .07);
  border: 1px solid rgba(168, 85, 247, .45);
  border-radius: 6px;
  cursor: pointer;
  transition: background .25s, box-shadow .25s, border-color .25s, transform .25s;
}
.story-choice:hover,
.story-choice:focus-visible {
  background: rgba(168, 85, 247, .18);
  border-color: var(--purple);
  box-shadow: 0 0 18px rgba(168, 85, 247, .5), inset 0 0 14px rgba(168, 85, 247, .15);
  transform: translateX(3px);
}
.story-choice:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}
.story-choice__label::before {
  content: '▸ ';
  color: var(--purple-soft);
}
.story-choice__cost {
  flex-shrink: 0;
  font-size: .68rem;
  color: var(--pink);
  text-shadow: 0 0 10px rgba(240, 171, 252, .8);
  font-variant-numeric: tabular-nums;
}

/* ---------- Ending card ---------- */
.story-ending {
  margin-top: 1.4rem;
  padding: 1.4rem 1rem 1.6rem;
  text-align: center;
  border: 1px solid rgba(240, 171, 252, .5);
  border-radius: 8px;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(168, 85, 247, .18), transparent 70%),
    rgba(7, 4, 13, .6);
  box-shadow: 0 0 30px rgba(168, 85, 247, .35), inset 0 0 30px rgba(107, 33, 168, .25);
}
.story-ending__kicker {
  font-family: var(--font-display);
  font-size: .55rem;
  letter-spacing: .45em;
  color: var(--purple);
  margin-bottom: .7rem;
}
.story-ending__epithet {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.3rem, 6vw, 2.2rem);
  line-height: 1.1;
  color: #fff;
  text-shadow:
    0 0 18px rgba(168, 85, 247, .9),
    0 0 60px rgba(168, 85, 247, .6),
    0 0 110px rgba(240, 171, 252, .4);
}
.story-ending__epitaph {
  margin: .8rem auto 1.3rem;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: .85rem;
  line-height: 1.7;
  color: var(--text-dim);
  font-style: italic;
}
.story-restart { border: 0; cursor: pointer; }

/* ---------- Hint line ---------- */
.story-hint {
  padding: 0 .9rem 1rem;
  font-family: var(--font-display);
  font-size: .48rem;
  letter-spacing: .3em;
  color: var(--text-dim);
  text-align: center;
}

/* ---------- Larger screens ---------- */
@media (min-width: 720px) {
  .story-terminal__bar { padding: .8rem 1.4rem; }
  .story-terminal__label { font-size: .58rem; }
  .story-meter { padding: 1.2rem 1.6rem .3rem; }
  .story-screen { padding: 1.6rem 1.6rem 1.4rem; }
  .story-text { font-size: 1.05rem; min-height: 10.5em; }
  .story-choice { font-size: .7rem; padding: 1rem 1.3rem; }
  .story-choices {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
  .story-ending { padding: 2rem 2rem 2.2rem; }
  .story-hint { font-size: .55rem; padding-bottom: 1.3rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .story-caret { animation: none; opacity: 1; }
  .story-meter__fill { transition: none; animation: none; }
  .story-terminal.is-low .story-meter__fill { animation: none; }
  .story-choice { transition: none; }
  .story-choice:hover,
  .story-choice:focus-visible { transform: none; }
  .story-meter__delta { transition: none; }
}