@font-face {
  font-family: 'TempleOS';
  src: url('/templeos_font.ttf') format('truetype');
  font-display: swap;
}

:root {
  --bg-navy:   #0d1b2a;
  --bg-panel:  #152337;
  --bg-nav:    #091420;
  --gold:      #f2c94c;
  --gold-dim:  #cfaf45;
  --gold-border: #2a4060;
  --parchment: #f5e6c8;
}

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

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg-navy);
  color: var(--parchment);
  font-family: Georgia, 'Times New Roman', serif;
  -webkit-tap-highlight-color: transparent;
}

/* ── Layout ── */
#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
}

/* ── Desktop: centered column ── */
@media (min-width: 640px) {
  html, body {
    overflow: auto;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(242,201,76,0.05), transparent 60%),
      #06101a;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100%;
  }
  #app {
    width: 100%;
    max-width: 520px;
    min-height: 100dvh;
    height: 100dvh;
    position: sticky;
    top: 0;
    border-left: 1px solid var(--gold-border);
    border-right: 1px solid var(--gold-border);
    box-shadow:
      -1px 0 40px rgba(0,0,0,0.4),
       1px 0 40px rgba(0,0,0,0.4),
       0 0 120px rgba(0,0,0,0.3);
  }
  #word-panel { height: 320px; }
  .btn-primary { font-size: 16px; }
}

#top-bar {
  background: var(--bg-nav);
  text-align: center;
  padding: 14px 16px 10px;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}
#brand {
  font-family: monospace;
  font-size: 15px;
  letter-spacing: 0.12em;
  color: var(--gold-dim);
}

#page-header {
  background: var(--bg-navy);
  text-align: center;
  padding: 16px 28px 14px;
  flex-shrink: 0;
}
#page-title {
  font-family: monospace;
  font-size: clamp(16px, 4vw, 22px);
  letter-spacing: 0.18em;
  color: var(--gold);
  font-weight: 700;
  line-height: 1.2;
}
#page-desc {
  font-family: Georgia, serif;
  font-size: 13px;
  color: var(--gold-dim);
  line-height: 1.4;
  margin-top: 6px;
}
.header-divider {
  width: 64px;
  height: 1px;
  background: var(--gold);
  border: none;
  margin: 12px auto 0;
  opacity: 0.8;
}

#content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-panel {
  display: none;
  padding: 16px 24px 32px;
  min-height: 100%;
}
.tab-panel.active { display: block; }

/* ── Bottom nav ── */
#bottom-nav {
  display: flex;
  background: var(--bg-nav);
  flex-shrink: 0;
  border-top: 1px solid var(--gold-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#bottom-nav button {
  flex: 1;
  background: none;
  border: none;
  border-top: 2px solid transparent;
  color: var(--gold-dim);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  padding: 12px 6px 10px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  line-height: 1.2;
}
#bottom-nav button.active {
  color: var(--gold);
  border-top-color: var(--gold);
  font-weight: 700;
}

/* ── Verse card ── */
#verse-card {
  background: var(--bg-panel);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  padding: 28px 20px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 8px;
  text-align: center;
}
#verse-ref {
  font-family: Georgia, serif;
  font-size: 15px;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.card-divider {
  width: 40px;
  height: 1px;
  background: var(--gold-dim);
  border: none;
  margin: 14px 0;
}
#verse-text {
  font-family: Georgia, serif;
  font-size: 17px;
  color: var(--parchment);
  line-height: 1.5;
}
#seed-line {
  font-family: monospace;
  font-size: 11px;
  color: var(--gold-dim);
  text-align: center;
  margin-top: 12px;
  min-height: 16px;
}

/* ── Word stream ── */
#word-panel {
  background: var(--bg-panel);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 20px;
  margin-top: 8px;
  position: relative;
}
#oracle-empty-divider {
  width: 40px;
  height: 1px;
  background: var(--gold-dim);
  border: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#word-stream {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.word-item {
  font-family: Georgia, serif;
  font-size: 22px;
  color: var(--parchment);
  text-align: center;
  line-height: 1.4;
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

#oracle-meta {
  font-family: monospace;
  font-size: 11px;
  color: var(--gold-dim);
  text-align: center;
  margin-top: 8px;
  min-height: 16px;
}

/* ── Buttons ── */
.btn-primary {
  display: block;
  width: 100%;
  padding: 18px;
  margin-top: 20px;
  background: var(--gold);
  color: var(--bg-navy);
  border: none;
  border-radius: 2px;
  font-family: monospace;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.24);
  transition: background 0.15s;
}
.btn-primary:hover { background: #ffd766; }
.btn-primary:active { background: #e6b82e; }

.btn-outline {
  display: block;
  width: 100%;
  padding: 12px;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 2px;
  font-family: monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-outline:hover { background: rgba(242,201,76,0.08); }

/* ── Controls panel ── */
.controls {
  background: var(--bg-panel);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  padding: 16px 20px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.control-label {
  font-family: monospace;
  font-size: 11px;
  color: var(--gold-dim);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.controls hr {
  border: none;
  border-top: 1px solid var(--gold-border);
}
.radio-row {
  display: flex;
  gap: 4px;
}
.radio-row label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: monospace;
  font-size: 12px;
  color: var(--gold-dim);
  cursor: pointer;
}
.radio-row input[type=radio] { accent-color: var(--gold); }
.export-row {
  display: flex;
  gap: 8px;
}
.export-row .btn-outline { flex: 1; }

.delay-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
#delay-label {
  font-family: monospace;
  font-size: 11px;
  color: var(--gold-dim);
  white-space: nowrap;
  min-width: 72px;
}
input[type=range] {
  flex: 1;
  accent-color: var(--gold);
}

/* ── About ── */
#tab-about h2 {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 10px;
}
#tab-about p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--parchment);
  margin-bottom: 16px;
}
#tab-about .disclaimer {
  font-family: monospace;
  font-size: 11px;
  font-style: italic;
  color: var(--gold-dim);
  line-height: 1.5;
}
#tab-about a {
  display: block;
  font-family: monospace;
  font-size: 13px;
  color: var(--gold-dim);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s;
}
#tab-about a:hover { color: var(--gold); }
.about-section-divider {
  width: 100%;
  height: 1px;
  background: var(--gold-border);
  border: none;
  margin: 16px 0 20px;
}
.about-title {
  font-family: monospace;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 16px;
  line-height: 1.3;
}

/* ── Welcome modal ── */
#welcome-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}
#welcome-overlay.hidden { display: none; }
#welcome-box {
  background: var(--bg-panel);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  padding: 28px 24px 20px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}
#welcome-box h2 {
  font-family: monospace;
  font-size: 16px;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.welcome-section-title {
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 6px;
}
.welcome-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--parchment);
  margin-bottom: 18px;
}
.welcome-footer {
  font-family: monospace;
  font-size: 11px;
  color: var(--gold-dim);
  line-height: 1.5;
  padding-top: 14px;
  border-top: 1px solid var(--gold-border);
  margin-bottom: 16px;
}
#btn-welcome-ok {
  margin-top: 4px;
}

/* ── TMode ── */
body.t-mode,
body.t-mode * {
  -webkit-font-smoothing: none !important;
  font-smooth: never !important;
  text-rendering: optimizeSpeed !important;
}
body.t-mode {
  background: #000;
  color: #fff;
  font-family: 'TempleOS', monospace;
}
body.t-mode #top-bar    { background: #000; }
body.t-mode #page-header { background: #000; }
body.t-mode #bottom-nav  { background: #000; border-color: #FFFF55; }
/* TMode: TempleOS font on all elements.
   Small text locked to 16px (2×8 grid) — clean multiple of TempleOS
   native 8px glyph size, avoids Chrome bitmap rasterization artifacts. */
body.t-mode #brand       { color: #FFFF55; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode #page-title  { color: #FFFF55; font-family: 'TempleOS', monospace; }
body.t-mode #page-desc   { color: #fff;    font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode .header-divider { background: #FFFF55; }
body.t-mode #bottom-nav button        { color: #fff; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode #bottom-nav button.active { color: #FFFF55; }
body.t-mode #verse-card, body.t-mode #word-panel, body.t-mode .controls {
  background: #111; border-color: #FFFF55;
}
body.t-mode #verse-ref   { color: #FFFF55; font-family: 'TempleOS', monospace; font-style: normal; font-size: 16px; }
body.t-mode .card-divider, body.t-mode #oracle-empty-divider { background: #FFFF55; }
body.t-mode #verse-text  { color: #fff; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode #seed-line, body.t-mode #oracle-meta { color: #AA5500; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode .word-item   { color: #fff; font-family: 'TempleOS', monospace; }
body.t-mode .btn-primary { background: #FFFF55; color: #000; font-family: 'TempleOS', monospace; }
body.t-mode .btn-outline { color: #FFFF55; border-color: #FFFF55; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode .control-label { color: #FFFF55; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode .radio-row label { color: #FFFF55; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode .radio-row input[type=radio] { accent-color: #FFFF55; }
body.t-mode #delay-label { color: #FFFF55; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode input[type=range] { accent-color: #FFFF55; }
body.t-mode #tab-about h2 { color: #FFFF55; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode #tab-about p  { color: #fff;    font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode #tab-about a  { color: #fff;    font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode #tab-about a:hover { color: #FFFF55; }
body.t-mode #tab-about .disclaimer { color: #AA5500; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode .about-section-divider { background: #FFFF55; }
body.t-mode .about-title { color: #FFFF55; font-family: 'TempleOS', monospace; font-size: 24px; }
body.t-mode #welcome-box { background: #111; border-color: #FFFF55; }
body.t-mode #welcome-box h2 { color: #FFFF55; font-family: 'TempleOS', monospace; }
body.t-mode .welcome-section-title { color: #FFFF55; font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode .welcome-body { color: #fff;    font-family: 'TempleOS', monospace; font-size: 16px; }
body.t-mode .welcome-footer { color: #AA5500; font-family: 'TempleOS', monospace; font-size: 16px; border-color: #FFFF55; }