/* Neon Ash — Flicker Run terminal. Sits on top of the site's styles.css tokens. */
.play-page { max-width: var(--max); margin: 0 auto; }
.play-page--wide { max-width: var(--wide); }
.play-kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon-amber); margin: 0 0 0.75rem; }
.play-page h1 { font-family: var(--serif); font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; letter-spacing: 0.03em; line-height: 1.15; margin: 0 0 0.5rem; color: var(--text); text-shadow: 0 0 36px rgba(0, 212, 239, 0.15); }
.play-subtitle { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 1.25rem; }
.play-intro { font-family: var(--serif); font-size: 1.15rem; line-height: 1.7; color: var(--text); margin: 0 0 1.5rem; max-width: var(--max); }

.fr-term { position: relative; z-index: 2; border: 1px solid var(--border); border-radius: 6px; background: #05060a; box-shadow: 0 0 0 1px rgba(0, 212, 239, 0.08) inset, 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(0, 212, 239, 0.05); overflow: hidden; margin: 0 0 2.5rem; }
.fr-bar { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); background: var(--bg-elevated); font-family: var(--mono); font-size: 0.78rem; color: var(--text-muted); }
.fr-title { color: var(--neon-cyan); font-weight: 500; letter-spacing: 0.12em; }
.fr-spacer { flex: 1; }
.fr-link-on { color: #7ee2a8; }
.fr-link-connecting { color: var(--neon-amber); }
.fr-save { color: var(--text-muted); opacity: 0.75; }

.fr-log { height: 60vh; min-height: 320px; max-height: 720px; overflow-y: auto; padding: 14px 16px; font-family: var(--mono); font-size: 0.92rem; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-wrap: break-word; scroll-behavior: smooth; }
.fr-log:focus { outline: 1px solid var(--neon-cyan); outline-offset: -1px; }
.fr-line { margin: 0; min-height: 1.55em; }
.fr-echo { color: var(--neon-cyan); margin-top: 0.7em; }
.fr-h { color: var(--neon-amber); font-weight: 500; }
.fr-dim, .fr-exits { color: var(--text-muted); }
.fr-info { color: #9ecbff; }
.fr-ok { color: #7ee2a8; }
.fr-warn { color: #ffb36b; }
.fr-npc { color: #d9c7ff; }
.fr-read { color: #e8dcc0; border-left: 2px solid var(--neon-magenta); padding-left: 10px; }
.fr-map { color: var(--text); }
.fr-sys { color: var(--text-muted); font-style: italic; }
.fr-player { color: #ff7dbd; }
.fr-chat { color: #ffd1e6; }

.fr-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--bg-elevated); }
.fr-prompt { font-family: var(--mono); color: var(--neon-magenta); font-weight: 500; }
.fr-form input { flex: 1; min-width: 0; font-family: var(--mono); font-size: 1rem; background: #05060a; color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; }
.fr-form input:focus { outline: none; border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(0, 212, 239, 0.15); }
.fr-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 12px; background: var(--bg-elevated); }
.fr-sep { flex: 1; }
.fr-btn { font-family: var(--mono); font-size: 0.8rem; color: var(--text); background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 5px 10px; cursor: pointer; }
.fr-btn:hover, .fr-btn:focus-visible { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.fr-btn-go { color: var(--neon-cyan); }
.fr-dir { min-width: 2.4rem; }

.play-copy { max-width: var(--max); margin: 0 auto 2rem; }
.play-copy h2 { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin: 2rem 0 0.6rem; color: var(--text); }
.play-copy p, .play-copy li { color: var(--text); line-height: 1.7; }
.play-copy a { color: var(--neon-cyan); }
.play-copy code { font-family: var(--mono); font-size: 0.88em; color: var(--neon-amber); background: rgba(232, 168, 74, 0.08); padding: 0 4px; border-radius: 3px; }
.play-commands { padding-left: 1.2rem; }

@media (max-width: 640px) {
  .fr-log { height: 55vh; min-height: 260px; font-size: 0.86rem; padding: 10px; }
  .fr-sep { display: none; }
  .fr-save { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fr-log { scroll-behavior: auto; } }
/* character creation: clickable archetype choices */
.fr-choice-line, .fr-choice { margin-top: 0.35em; }
.fr-choice { font: inherit; color: var(--neon-cyan); background: transparent; border: 1px solid rgba(0, 212, 239, 0.35); border-radius: 4px; padding: 2px 10px; cursor: pointer; text-align: left; letter-spacing: 0.04em; }
.fr-choice:hover, .fr-choice:focus-visible { background: rgba(0, 212, 239, 0.08); border-color: var(--neon-cyan); outline: none; }