/* The Norden Bomb Site — style.css
   Rides on chrome.css (shared dark-academia ground, fonts, top bar, verdict juice).
   Palette kept in family with the other chambers: candlelit walnut + brass. */

:root {
  --nb-brass:   #c9a84c;
  --nb-candle:  #E4C883;
  --nb-parch:   #E9DFC8;
  --nb-ground:  #281B10;
  --nb-panel:   rgba(233, 223, 200, 0.045);
  --nb-panel-border: rgba(201, 168, 76, 0.28);
  --nb-oxblood: #7E1C24;
  --nb-hunter:  #3F5C48;
  --nb-muted:   rgba(233, 223, 200, 0.55);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--nb-parch); min-height: 100vh; }

/* ── Header ── */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; max-width: 900px; margin: 0 auto;
}
.site-title { font-size: 1.05rem; letter-spacing: .08em; color: var(--nb-parch); }
.site-title span { color: var(--nb-brass); }
.header-nav { display: flex; gap: .5rem; }
.btn-ghost {
  background: transparent; border: 1px solid var(--nb-panel-border);
  color: var(--nb-muted); padding: .35rem .8rem; border-radius: 4px;
  font-size: .72rem; letter-spacing: .1em; cursor: pointer; text-transform: uppercase;
}
.btn-ghost:hover { color: var(--nb-candle); border-color: var(--nb-brass); }

/* ── Layout ── */
.wrap { max-width: 760px; margin: 0 auto; padding: 0 1.25rem 4rem; }

/* ── Hero ── */
.hero { text-align: center; padding: 1.5rem 0 1rem; }
.hero-eyebrow { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--nb-brass); opacity: .85; margin: 0 0 .5rem; }
.hero-title { font-size: 2.1rem; margin: .2rem 0 .7rem; color: var(--nb-candle); }
.hero-blurb { font-size: 1.05rem; line-height: 1.6; color: var(--nb-parch); max-width: 560px; margin: 0 auto; opacity: .92; }
.hero-blurb em { color: var(--nb-candle); }

/* ── Mode toggle ── */
.mode-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1.5rem 0 1rem; }
@media (max-width: 860px) { .mode-toggle { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mode-toggle { grid-template-columns: 1fr; } }
.mode-card {
  display: flex; flex-direction: column; gap: .25rem; text-align: left;
  background: var(--nb-panel); border: 1px solid var(--nb-panel-border);
  border-radius: 8px; padding: .9rem 1rem; cursor: pointer; color: var(--nb-parch);
  transition: border-color .15s, background .15s, transform .1s;
}
.mode-card:hover { border-color: var(--nb-brass); transform: translateY(-1px); }
.mode-card.active { border-color: var(--nb-brass); background: rgba(201,168,76,.1); box-shadow: 0 0 0 1px rgba(201,168,76,.25) inset; }
.mode-name { font-size: 1.1rem; color: var(--nb-candle); font-family: 'Cinzel', serif; letter-spacing: .04em; }
.mode-tag { font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--nb-brass); }
.mode-desc { font-size: .86rem; color: var(--nb-muted); line-height: 1.45; margin-top: .15rem; }

/* ── Session bar ── */
.session-bar { display: flex; gap: 1.4rem; justify-content: center; padding: .5rem 0 1rem; font-size: .72rem; letter-spacing: .1em; color: var(--nb-muted); }
.session-bar b { color: var(--nb-candle); }

/* ── Panel ── */
.panel { background: var(--nb-panel); border: 1px solid var(--nb-panel-border); border-radius: 10px; padding: 1.4rem 1.4rem 1.6rem; }
.panel-eyebrow { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--nb-brass); margin: 0 0 .9rem; }
.loading, .error { text-align: center; color: var(--nb-muted); padding: 2rem 0; }
.error { color: #e6a2a2; }

/* ── The Reckoning ── */
.phrase { font-size: 1.6rem; text-align: center; color: var(--nb-candle); margin: .2rem 0 1.3rem; line-height: 1.3; }
.options { display: flex; flex-direction: column; gap: .6rem; }
.option {
  display: flex; align-items: flex-start; gap: .8rem; text-align: left;
  background: rgba(233,223,200,.03); border: 1px solid var(--nb-panel-border);
  border-radius: 8px; padding: .85rem 1rem; cursor: pointer; color: var(--nb-parch);
  transition: border-color .12s, background .12s;
}
.option:hover:not(:disabled) { border-color: var(--nb-brass); background: rgba(201,168,76,.08); }
.option:disabled { cursor: default; opacity: .75; }
.option-mark { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border: 1px solid var(--nb-brass); border-radius: 50%; color: var(--nb-brass); font-size: .72rem; }
.option-text { font-size: .98rem; line-height: 1.5; }

/* ── The Bluff ── */
.word-head { display: flex; align-items: baseline; gap: .7rem; justify-content: center; margin: .3rem 0 .2rem; flex-wrap: wrap; }
.word { font-size: 2rem; color: var(--nb-candle); letter-spacing: .01em; }
.word-pos { font-size: .8rem; color: var(--nb-brass); font-style: italic; }
.word-pron { text-align: center; color: var(--nb-muted); font-size: .8rem; margin: 0 0 1.2rem; }
.response-label { font-size: .95rem; color: var(--nb-parch); margin: .3rem 0 .5rem; }
.bluff-input {
  width: 100%; background: rgba(0,0,0,.22); border: 1px solid var(--nb-panel-border);
  border-radius: 6px; color: var(--nb-parch); padding: .7rem .8rem; font-size: .98rem;
  line-height: 1.5; resize: vertical;
}
.bluff-input:focus { outline: none; border-color: var(--nb-brass); }
.rubric-hint { font-size: .66rem; color: var(--nb-muted); margin: .6rem 0 .8rem; letter-spacing: .04em; line-height: 1.7; }
.rubric-hint span { color: var(--nb-brass); }

/* ── The Feghoot ── */
.seed-source { text-align: center; color: var(--nb-muted); font-size: .72rem; margin: -.4rem 0 1rem; letter-spacing: .05em; }
.feghoot-brief {
  font-size: .88rem; line-height: 1.6; color: var(--nb-muted);
  border-left: 2px solid var(--nb-panel-border); padding: .1rem 0 .1rem .8rem;
  margin: 0 0 1.2rem;
}
.feghoot-brief em { color: var(--nb-candle); font-style: italic; }
.feghoot-input { min-height: 9rem; }
.swerve {
  margin: .2rem 0 1.1rem; padding: .8rem .95rem;
  border: 1px dashed var(--nb-panel-border); border-radius: 6px;
  background: rgba(0,0,0,.16);
}
.swerve-label { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--nb-brass); margin: 0 0 .35rem; }
.swerve-text { font-size: .95rem; line-height: 1.55; color: var(--nb-parch); margin: 0; }

/* ── The Muir — a bonus deliberately kept outside the 100 ── */
.muir {
  margin: 1.1rem 0 .2rem; padding: .75rem .9rem;
  border: 1px solid rgba(233, 223, 200, .13); border-radius: 6px;
  background: rgba(0,0,0,.14);
}
.muir--awarded { border-color: var(--nb-brass); background: rgba(201, 168, 76, .07); }
.muir-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.muir-label { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--nb-muted); }
.muir--awarded .muir-label { color: var(--nb-brass); }
.muir-score { font-size: .95rem; color: var(--nb-muted); }
.muir--awarded .muir-score { color: var(--nb-candle); }
.muir-note { font-size: .86rem; line-height: 1.5; color: var(--nb-muted); margin: .4rem 0 0; }
.muir--awarded .muir-note { color: var(--nb-parch); }
.muir-foot { font-size: .58rem; letter-spacing: .05em; color: rgba(233,223,200,.32); margin: .45rem 0 0; }

/* ── Submit / next ── */
.submit-row { display: flex; align-items: center; gap: 1rem; }
.btn-submit, .btn-next {
  background: var(--nb-brass); color: #1b1206; border: none; border-radius: 6px;
  padding: .6rem 1.2rem; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; font-weight: 600;
}
.btn-submit:hover, .btn-next:hover { background: var(--nb-candle); }
.btn-submit:disabled { opacity: .6; cursor: default; }
.btn-next { margin-top: 1.3rem; background: transparent; color: var(--nb-brass); border: 1px solid var(--nb-brass); }
.btn-next:hover { background: rgba(201,168,76,.12); }
.word-count { font-size: .68rem; color: var(--nb-muted); }

/* ── Ruling (verdict swap target) ── */
.ruling { display: none; }
.ruling.visible { display: block; animation: nb-fade .3s ease both; }
@keyframes nb-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.verdict { font-size: 1.5rem; text-align: center; margin: .2rem 0 .3rem; letter-spacing: .05em; }
.verdict--correct, .verdict--sharp { color: var(--nb-candle); }
.verdict--solid { color: var(--nb-brass); }
.verdict--wrong { color: #d98a8a; }
.verdict--recognised { color: #9db9a6; }

/* ── RECOGNISED — the entry gave the word's real meaning, so it is not a forgery ── */
.recognised {
  margin: .2rem 0 1.2rem; padding: .85rem 1rem;
  border: 1px solid rgba(63, 92, 72, .55); border-left: 3px solid var(--nb-hunter);
  border-radius: 6px; background: rgba(63, 92, 72, .12);
}
.recognised-label { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: #9db9a6; margin: 0 0 .4rem; }
.recognised-note { font-size: .95rem; line-height: 1.55; color: var(--nb-parch); margin: 0; }
.recognised-foot { font-size: .62rem; letter-spacing: .04em; color: rgba(233,223,200,.42); margin: .5rem 0 0; }
.score-line { text-align: center; font-size: 1.6rem; color: var(--nb-candle); margin: 0 0 1rem; }
.score-line span { font-size: .9rem; color: var(--nb-muted); }
.ruling-you { text-align: center; color: var(--nb-muted); font-size: .8rem; margin: 0 0 1rem; }
.ruling-answer, .ruling-explain { font-size: .98rem; line-height: 1.6; margin: .5rem 0; }
.ruling-answer strong { color: var(--nb-candle); }
.ruling-explain { color: var(--nb-muted); }

/* ── Breakdown bars ── */
.breakdown { margin: 1rem 0; display: flex; flex-direction: column; gap: .7rem; }
.dim { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: center; }
.dim-name { font-size: .82rem; color: var(--nb-parch); }
.dim-score { font-size: .82rem; color: var(--nb-candle); }
.dim-bar { grid-column: 1 / -1; height: 5px; background: rgba(233,223,200,.1); border-radius: 3px; overflow: hidden; }
.dim-bar-fill { height: 100%; background: var(--nb-brass); border-radius: 3px; transition: width .7s cubic-bezier(.2,.7,.3,1); }
.dim-text { grid-column: 1 / -1; font-size: .82rem; color: var(--nb-muted); line-height: 1.45; margin: .1rem 0 0; }

/* ── Reveal ── */
.reveal { margin: 1.2rem 0 .3rem; padding: 1rem 1.1rem; border: 1px solid var(--nb-panel-border); border-left: 3px solid var(--nb-brass); border-radius: 6px; background: rgba(201,168,76,.05); }
.reveal-label { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--nb-brass); margin: 0 0 .4rem; }
.reveal-def { font-size: 1rem; line-height: 1.55; color: var(--nb-parch); margin: 0; }
.reveal-note { font-size: .82rem; color: var(--nb-muted); margin: .5rem 0 0; font-style: italic; }

/* ── Norden footnote ── */
.norden-note { margin-top: 2.5rem; }
.norden-note hr { border: none; border-top: 1px solid var(--nb-panel-border); margin-bottom: 1.2rem; }
.norden-note p { font-size: .88rem; line-height: 1.6; color: var(--nb-muted); }
.norden-note strong { color: var(--nb-candle); }
.norden-note em { color: var(--nb-brass); }
.norden-note-fine { font-size: .82rem; color: var(--nb-muted); line-height: 1.6; margin-top: .9rem; }
.norden-note-fine em { color: var(--nb-candle); font-style: italic; }