/* Strategic CYOA — shared brand styling (matches transform.html / the scene pages). */
:root {
  --paper: #F4F1EA;
  --ink: #1F2A2E;
  --ochre: #B8923C;
  --c-air:   #7E868C;
  --c-water: #3D5566;
  --c-fire:  #B5512A;
  --c-wood:  #5A6F3C;
  --c-earth: #9C7B2E;
  --c-metal: #5C5E62;
  --measure: 660px;
  --body-size: 19px;
  --line: 1.65;
  /* set per-page: --accent is the leading element's color */
  --accent: var(--ochre);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); }
body {
  font-family: "EB Garamond", Garamond, "Source Serif Pro", Georgia, serif;
  font-size: var(--body-size); line-height: var(--line); font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main { max-width: var(--measure); margin: 0 auto; padding: 0 28px; }

.back {
  position: absolute; top: 28px; left: 28px;
  font-style: italic; font-size: 15px; color: var(--ochre);
  text-decoration: none; line-height: 1;
}
.back:hover { color: var(--ink); }

.brand-floret { pointer-events: none;
  display: flex; justify-content: center; align-items: center; gap: 12px;
  padding-top: 36px; font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-weight: 400; font-size: 22px; line-height: 1; color: var(--ink);
  opacity: 0.85;
}
.brand-floret .star { color: var(--ochre); font-size: 16px; transform: translateY(-1px); }
.brand-floret .it { font-style: italic; }

.head { padding-top: 7vh; padding-bottom: 3vh; }
.head .eyebrow {
  font-style: italic; font-size: 0.9em; letter-spacing: 0.04em;
  color: var(--accent); margin: 0 0 0.8em; text-transform: lowercase;
}
.head h1 {
  font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif;
  font-weight: 400; font-size: calc(var(--body-size) * 2.0);
  line-height: 1.18; margin: 0 0 0.7em; letter-spacing: -0.005em;
}
.head .orientation { margin: 0 0 1.1em; }
.head .orientation:last-child { margin-bottom: 0; }

/* The element glyph, large + quiet, sets the scene's element. */
.element-mark {
  font-family: "Cormorant Garamond", serif; font-size: 2.2em;
  color: var(--accent); line-height: 1; display: inline-block; margin-bottom: 0.2em;
}

/* Incoming φ — the current arriving from the prior element. */
.incoming {
  border-left: 2px solid var(--accent); padding: 0.2em 0 0.2em 20px;
  margin: 4vh 0; opacity: 0.95;
}
.incoming .from { font-style: italic; font-size: 0.92em; opacity: 0.7; margin: 0 0 0.5em; }
.incoming .phi {
  font-family: "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: 0.86em; letter-spacing: 0.01em; margin: 0 0 0.5em; color: var(--ink);
}
.incoming .reading { font-style: italic; margin: 0; opacity: 0.85; }

/* The game. */
#game { padding: 3vh 0 4vh; min-height: 30vh; }
.cyoa-framing {
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  font-size: calc(var(--body-size) * 1.25); line-height: 1.3;
  margin: 0 0 1.6em; color: var(--ink);
}
.cyoa-options { display: flex; flex-direction: column; gap: 0; }
.cyoa-door {
  text-align: left; width: 100%; background: transparent; cursor: pointer;
  border: 0; border-bottom: 1px solid rgba(31,42,46,0.16);
  padding: 1.1em 0; font-family: inherit; color: var(--ink);
  display: block; transition: padding-left 0.15s ease;
}
.cyoa-door:first-child { border-top: 1px solid rgba(31,42,46,0.16); }
.cyoa-door:hover { padding-left: 12px; }
.cyoa-door:hover .cyoa-door-label { color: var(--accent); }
/* movement options carry a colored operator mark (--el-color set per element); tap/hover tints to it */
.cyoa-door .el-glyph { font-family: "Cormorant Garamond", serif; color: var(--el-color, var(--accent));
  margin-right: 0.5em; font-size: 1.06em; }
.cyoa-door[style*="--el-color"]:hover .cyoa-door-label,
.cyoa-door[style*="--el-color"]:active .cyoa-door-label { color: var(--el-color); }
.cyoa-door-label {
  display: block; font-size: calc(var(--body-size) * 1.02); line-height: 1.4;
}
.cyoa-door-hint {
  display: block; font-style: italic; font-size: 0.82em; opacity: 0.62;
  margin-top: 0.35em; line-height: 1.45;
}

/* Resolution — the φ this element produced + the handoff. */
.resolve { padding: 2vh 0 4vh; }
.resolve .label { font-style: italic; opacity: 0.6; font-size: 0.9em; margin: 0 0 0.7em; }
.resolve .phi {
  font-family: "SFMono-Regular", "JetBrains Mono", "Menlo", "Consolas", monospace;
  font-size: calc(var(--body-size) * 0.92); letter-spacing: 0.01em;
  background: rgba(31,42,46,0.04); padding: 0.8em 1em; border-radius: 2px;
  margin: 0 0 1.4em; overflow-x: auto;
}
.resolve .reading { font-style: italic; margin: 0 0 2.2em; }
.resolve .chain {
  font-family: "SFMono-Regular", "Menlo", monospace; font-size: 0.84em;
  opacity: 0.85; margin: 0 0 1.6em; line-height: 1.6;
}
.door-link {
  font-family: "EB Garamond", Garamond, serif; font-style: italic;
  font-size: calc(var(--body-size) * 1.15); color: var(--accent);
  text-decoration: none; border-bottom: 1px solid var(--accent);
  padding-bottom: 2px; line-height: 1; display: inline-block;
}
.door-link:hover { color: var(--ink); border-bottom-color: var(--ink); }
.copy-row {
  margin: 1.6em 0 0; font-size: 0.86em; opacity: 0.7;
  display: flex; gap: 0.6em; align-items: baseline; flex-wrap: wrap;
}
.copy-row code {
  font-family: "Menlo", monospace; font-size: 0.92em;
  background: rgba(31,42,46,0.05); padding: 0.2em 0.45em; border-radius: 2px;
}
.copy-btn {
  background: transparent; border: 0; border-bottom: 1px dotted var(--accent);
  color: var(--accent); cursor: pointer; font-family: inherit; font-style: italic;
  font-size: 0.95em; padding: 0;
}

/* the resolved retrieval prompt — a readable block to copy */
.retrieve-prompt {
  font-family: "EB Garamond", Garamond, serif;
  font-size: calc(var(--body-size) * 0.92);
  line-height: 1.6;
  background: rgba(31,42,46,0.04);
  border-left: 2px solid var(--accent);
  padding: 1.1em 1.3em;
  border-radius: 2px;
  white-space: pre-wrap;
}

.honest {
  font-style: italic; margin: 6vh 0 0; padding: 0 0 0 22px;
  border-left: 2px solid var(--ochre); max-width: 560px;
  font-size: calc(var(--body-size) * 0.92); opacity: 0.85;
}
.hairline { width: 64px; height: 1px; background: var(--ochre); margin: 6vh auto; border: 0; opacity: 0.85; }
footer { text-align: center; padding: 8vh 28px; font-size: 14px; opacity: 0.55; }
footer a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
footer a:hover { color: var(--ochre); border-bottom-color: var(--ochre); }
::selection { background: rgba(184,146,60,0.22); color: var(--ink); }

@media (max-width: 640px) {
  :root { --body-size: 18px; }
  main { padding: 0 22px; }
  .back { top: 20px; left: 22px; }
  .head { padding-top: 6vh; }
  .head h1 { font-size: calc(var(--body-size) * 1.8); }
}