prologue: wire Prologue tab into App, add prologue CSS

2026-05-03 01:27:08 +00:00
parent 645a593a6d
commit f8c323858c
2 changed files with 189 additions and 2 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -421,3 +421,161 @@
 .btn-new-game:hover {
  color: #6b5a3e;
 }
+
+/* ── Prologue screen ─────────────────────────────────────────────── */
+
+.prologue-screen {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 2rem 1rem 4rem;
+}
+
+.prologue-header {
+  margin-bottom: 1.75rem;
+}
+
+.prologue-label {
+  display: block;
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: #6b5a3e;
+  margin-bottom: 0.4rem;
+}
+
+.prologue-title {
+  font-size: 1.6rem;
+  font-weight: normal;
+  color: #2a1f0e;
+  letter-spacing: 0.05em;
+  margin: 0 0 0.4rem;
+}
+
+.prologue-subtitle {
+  font-size: 0.8rem;
+  color: #6b5a3e;
+  font-style: italic;
+  margin: 0;
+}
+
+/* Selection grid — two columns of cards */
+.prologue-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 1.5rem;
+}
+
+.prologue-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  background: #faf7f2;
+  border: 1px solid #c8b89a;
+  border-radius: 8px;
+  padding: 0.875rem 1rem;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.prologue-card:hover {
+  border-color: #8fbc8f;
+  background: #f0f7f0;
+}
+
+.prologue-card--selected {
+  border: 2px solid #2d5a2d;
+  background: #f0f7f0;
+}
+
+.prologue-card-latin {
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #9a8a6e;
+}
+
+.prologue-card-name {
+  font-size: 0.9rem;
+  font-weight: bold;
+  color: #2a1f0e;
+}
+
+.prologue-card-summary {
+  font-size: 0.73rem;
+  color: #6b5a3e;
+  line-height: 1.5;
+}
+
+.prologue-card-den {
+  font-size: 0.72rem;
+  color: #2d5a2d;
+  font-weight: bold;
+  margin-top: 2px;
+}
+
+/* Confirm row */
+.prologue-confirm-row {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.prologue-confirm {
+  padding: 0.75rem 1.5rem;
+  border-radius: 6px;
+  border: 1px solid #2d5a2d;
+  background: #faf7f2;
+  color: #2d5a2d;
+  font-size: 0.85rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.prologue-confirm:hover:not(:disabled) {
+  background: #d4e8d4;
+}
+
+.prologue-confirm:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  border-color: #c8b89a;
+  color: #6b5a3e;
+}
+
+/* Read-only chosen view */
+.prologue-chosen {
+  /* inherits .prologue-screen padding */
+}
+
+.prologue-chosen-name {
+  font-size: 1.4rem;
+  font-weight: normal;
+  color: #2a1f0e;
+  letter-spacing: 0.05em;
+  margin: 0 0 0.2rem;
+}
+
+.prologue-chosen-latin {
+  display: block;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #9a8a6e;
+  margin-bottom: 1rem;
+}
+
+.prologue-chosen-summary {
+  font-size: 0.85rem;
+  color: #6b5a3e;
+  line-height: 1.7;
+  font-style: italic;
+  margin-bottom: 0.75rem;
+}
+
+.prologue-chosen-den {
+  font-size: 0.78rem;
+  color: #2a1f0e;
+}