:root {
  color-scheme: dark;
  --ink: #f5f4ff;
  --muted: #c0bdd8;
  --blue: #67e8ff;
  --blue-deep: #294ff5;
  --gold: #f7cc6d;
  --panel: #090d22;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-width: 320px;
  background: #050817;
  color: var(--ink);
  font-family: Manrope, system-ui, sans-serif;
}

button { font: inherit; }

.fable-shell { min-height: 100vh; display: grid; grid-template-rows: minmax(0, 1fr) auto; }

.story-stage {
  position: relative;
  min-height: min(74vh, 800px);
  overflow: hidden;
  isolation: isolate;
  background: #070b1d;
}

.story-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: center / cover no-repeat url("../images/story/01-last-task.png");
  transition: opacity 550ms ease, transform 1600ms ease;
  transform: scale(1.01);
}

.story-stage.is-switching .story-backdrop { opacity: .35; transform: scale(1.05); }

.vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(3, 5, 19, .88) 0%, rgba(5, 8, 26, .54) 38%, rgba(3, 4, 19, .04) 76%), linear-gradient(0deg, rgba(3, 5, 18, .75), transparent 45%);
}

.stage-header { position: absolute; z-index: 2; inset: 28px 34px auto; display: flex; align-items: start; justify-content: space-between; gap: 20px; }

.mode-label, .chapter-kicker, .eyebrow, .tool-status { font-family: "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.mode-label { margin: 0; color: var(--blue); font-size: .72rem; padding: 9px 12px; border: 1px solid rgba(103, 232, 255, .36); border-radius: 999px; background: rgba(6, 13, 37, .45); backdrop-filter: blur(10px); }

.title-lockup { text-align: right; text-shadow: 0 2px 22px #030718; }
.title-lockup h1 { margin: 0; font: 600 clamp(1.25rem, 2vw, 1.8rem)/1 "Playfair Display", serif; letter-spacing: -.03em; }
.title-lockup p { margin: 5px 0 0; color: var(--blue); font: 500 .65rem/1 "DM Mono", monospace; letter-spacing: .16em; text-transform: uppercase; }

.story-copy { position: absolute; z-index: 2; left: clamp(24px, 7vw, 120px); bottom: clamp(94px, 16vh, 170px); max-width: min(540px, calc(100% - 48px)); text-shadow: 0 3px 20px #030512; }
.chapter-kicker { margin: 0 0 12px; color: var(--gold); font-size: .72rem; }
.story-copy h2 { margin: 0; font: 600 clamp(2.3rem, 5.2vw, 5.7rem)/.97 "Playfair Display", serif; letter-spacing: -.055em; }
.story-copy p:not(.chapter-kicker) { max-width: 39ch; margin: 19px 0 0; color: #e0e0f1; font-size: clamp(.95rem, 1.35vw, 1.13rem); line-height: 1.65; }

.story-controls { position: absolute; z-index: 2; left: clamp(24px, 7vw, 120px); bottom: 30px; display: flex; align-items: center; gap: 15px; }
.nav-arrow { width: 39px; height: 39px; border: 1px solid rgba(240, 242, 255, .42); border-radius: 50%; color: white; background: rgba(4, 8, 25, .5); cursor: pointer; transition: background 180ms, transform 180ms; }
.nav-arrow:hover { background: rgba(90, 198, 255, .28); transform: translateY(-2px); }
.chapter-dots { display: flex; gap: 8px; }
.chapter-dot { width: 8px; height: 8px; border: 0; border-radius: 50%; padding: 0; background: rgba(255,255,255,.32); cursor: pointer; transition: width 180ms, background 180ms; }
.chapter-dot.is-active { width: 27px; border-radius: 999px; background: var(--blue); }
.slide-count { position: absolute; z-index: 2; right: 38px; bottom: 34px; display: flex; gap: 5px; color: #a8a9c7; font: .7rem/1 "DM Mono", monospace; }
.slide-count span:first-child { color: var(--blue); }

.start-button { position: absolute; z-index: 4; left: 50%; top: 52%; display: inline-flex; align-items: center; gap: 8px; transform: translate(-50%, -50%); border: 1px solid rgba(183, 249, 255, .8); border-radius: 999px; padding: 12px 21px; color: #091226; background: linear-gradient(120deg, #d8fbff, #70e9ff 56%, #b6a0ff); box-shadow: 0 0 0 7px rgba(74, 211, 255, .12), 0 0 38px rgba(90, 205, 255, .72); font-weight: 800; line-height: 1.12; text-align: left; cursor: pointer; transition: box-shadow 180ms; }
.start-button i { font-style: normal; font-size: 1.1rem; }
.start-button:hover { box-shadow: 0 0 0 9px rgba(74, 211, 255, .14), 0 0 48px rgba(90, 205, 255, .9); }
.start-button.is-bumped { animation: button-bump 720ms cubic-bezier(.2, .75, .24, 1); }

.field-agents { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.field-agent { position: absolute; width: var(--agent-size); height: var(--agent-size); border-radius: 50%; opacity: 0; background: var(--agent-color); box-shadow: 0 0 7px 2px var(--agent-color), 0 0 23px 8px color-mix(in srgb, var(--agent-color) 52%, transparent); animation: agent-dash 950ms cubic-bezier(.12, .66, .27, 1) forwards; }
.field-agent::after { content: ""; position: absolute; top: 50%; right: 50%; width: var(--trail); height: 2px; transform: translateY(-50%) rotate(var(--trail-angle)); transform-origin: right; background: linear-gradient(90deg, transparent, var(--agent-color)); filter: blur(.4px); opacity: .86; }

@keyframes agent-dash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  15% { opacity: 1; }
  72% { opacity: 1; transform: translate(calc(-50% + var(--travel-x)), calc(-50% + var(--travel-y))) scale(1); }
  82% { opacity: 1; transform: translate(calc(-50% + var(--travel-x)), calc(-50% + var(--travel-y))) scale(1.8); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--travel-x)), calc(-50% + var(--travel-y))) scale(.25); }
}

@keyframes button-bump {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  18% { transform: translate(calc(-50% + (var(--bump-x) * -.18)), calc(-50% + (var(--bump-y) * -.18))) rotate(calc(var(--bump-rotate) * -.18)); }
  55% { transform: translate(calc(-50% + var(--bump-x)), calc(-50% + var(--bump-y))) rotate(var(--bump-rotate)); }
  76% { transform: translate(calc(-50% + (var(--bump-x) * .35)), calc(-50% + (var(--bump-y) * .35))) rotate(calc(var(--bump-rotate) * .32)); }
}

.pact-panel { min-height: 183px; padding: 22px clamp(24px, 7vw, 120px); display: grid; grid-template-columns: minmax(250px, 1.25fr) minmax(300px, 1fr); column-gap: 44px; row-gap: 14px; align-items: center; border-top: 1px solid rgba(133, 148, 255, .22); background: radial-gradient(circle at 72% 0%, rgba(42, 47, 142, .34), transparent 45%), var(--panel); transition: min-height 700ms, opacity 450ms, padding 700ms; }
.eyebrow { margin: 0 0 7px; color: #8090ec; font-size: .65rem; }
.pact-copy h2 { margin: 0; font: 700 clamp(1.25rem, 2vw, 1.75rem)/1.2 "Playfair Display", serif; }
.pact-copy p:not(.eyebrow) { margin: 8px 0 0; max-width: 54ch; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.confirm-pact { margin-top: 14px; border: 1px solid rgba(183, 249, 255, .8); border-radius: 999px; padding: 10px 15px; color: #071126; background: linear-gradient(120deg, #d8fbff, #70e9ff 56%, #b6a0ff); box-shadow: 0 0 18px rgba(90, 205, 255, .36); font-weight: 800; cursor: pointer; }
.confirm-pact:hover, .confirm-pact:focus-visible { filter: brightness(1.08); outline: 2px solid #f7cc6d; outline-offset: 3px; }
.agent-list { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; list-style: none; }
.agent-list li { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid rgba(176, 181, 255, .22); border-radius: 999px; color: #dfdff5; background: rgba(255, 255, 255, .035); font: 500 .74rem/1 "DM Mono", monospace; }
.app-orb { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 10px currentColor; }
.codex { color: #74e8ff; background: currentColor; }.chatgpt { color: #98f5be; background: currentColor; }.claude { color: #f3a15c; background: currentColor; }.gemini { color: #a795ff; background: currentColor; }.grok { color: #ff9bb6; background: currentColor; }
.tool-status { grid-column: 1 / -1; margin: 0; color: #727594; font-size: .62rem; }

.pact-panel.is-open { display: none; }

@media (max-width: 680px) {
  .story-stage { min-height: 72vh; }
  .stage-header { inset: 20px 18px auto; }
  .mode-label { font-size: .56rem; padding: 7px 8px; }
  .title-lockup h1 { font-size: 1.05rem; }
  .story-copy { left: 24px; bottom: 118px; }
  .story-copy h2 { font-size: clamp(2.2rem, 11vw, 3.5rem); }
  .story-controls { left: 24px; bottom: 31px; }
  .slide-count { right: 22px; }
  .start-button { left: 50%; top: 52%; padding: 13px 18px; font-size: .86rem; }
  .pact-panel { grid-template-columns: 1fr; padding: 20px 24px; }
  .agent-list { justify-content: flex-start; }
  .vignette { background: linear-gradient(90deg, rgba(3, 5, 19, .79), rgba(3, 4, 19, .15)), linear-gradient(0deg, rgba(3, 5, 18, .7), transparent 50%); }
}

.character-screen { min-height: 100vh; padding: 38px clamp(18px, 5vw, 72px) 28px; background: radial-gradient(circle at 50% 0%, rgba(44, 87, 171, .26), transparent 32%), #06091a; }
.character-header { max-width: 760px; margin: 0 auto 28px; text-align: center; }
.character-header .chapter-kicker { margin-bottom: 8px; }
.character-header h2 { margin: 0; font: 700 clamp(2rem, 4vw, 4rem)/1 "Playfair Display", serif; letter-spacing: -.045em; }
.character-header > p:last-child { margin: 12px 0 0; color: var(--muted); }
.character-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 58px); max-width: 1420px; margin: 0 auto; }
.character-card { padding: clamp(16px, 2vw, 24px); border: 1px solid rgba(163, 176, 255, .19); border-radius: 22px; background: linear-gradient(145deg, rgba(19, 24, 62, .88), rgba(7, 10, 29, .94)); box-shadow: 0 18px 60px rgba(0, 0, 0, .25); }
.ai-card { border-color: rgba(255, 92, 106, .36); }.human-card { border-color: rgba(103, 232, 255, .28); }
.choice-heading { min-height: 100px; }.choice-heading .eyebrow { margin: 0 0 6px; }.choice-heading h3 { margin: 0; font: 700 clamp(1.3rem, 2vw, 1.8rem)/1.08 "Playfair Display", serif; }.choice-heading p:not(.eyebrow) { margin: 9px 0 0; color: var(--muted); font-size: .86rem; }
.avatar-grid { position: relative; margin-top: 16px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #0b1128; }
.avatar-grid img { width: 100%; height: 100%; display: block; object-fit: cover; }
.avatar-hit { position: absolute; z-index: 2; width: 25%; height: 33.333%; border: 0; background: transparent; cursor: pointer; }
.avatar-hit:hover, .avatar-hit:focus-visible { outline: 2px solid rgba(119, 240, 255, .94); outline-offset: -4px; background: rgba(95, 227, 255, .08); }
.thinking-frame { position: absolute; z-index: 3; width: 25%; height: 33.333%; border: 4px solid #ff4d62; box-shadow: 0 0 0 2px rgba(31, 1, 11, .7), 0 0 18px rgba(255, 43, 74, .95); pointer-events: none; transition: left 115ms linear, top 115ms linear; }
.thinking-frame.is-settled { border-color: #ffefc4; box-shadow: 0 0 0 2px rgba(35, 16, 1, .8), 0 0 26px rgba(255, 190, 69, .95); transition-duration: 380ms; }
.human-choice-frame { position: absolute; z-index: 3; width: 25%; height: 33.333%; border: 4px solid var(--blue); box-shadow: 0 0 0 2px rgba(2, 17, 23, .7), 0 0 18px rgba(86, 230, 255, .85); pointer-events: none; transition: left 180ms, top 180ms; }
.chosen-name { min-height: 22px; margin: 14px 0 0; color: #ffe5a9; font: 500 .82rem/1.45 "DM Mono", monospace; }
.name-field { display: block; margin-top: 14px; color: #c9c9e5; font-size: .78rem; }.name-field input { width: 100%; margin-top: 7px; padding: 11px 13px; border: 1px solid rgba(121, 225, 255, .36); border-radius: 9px; color: white; outline: none; background: rgba(2, 7, 24, .76); font: .9rem Manrope, sans-serif; }.name-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(103, 232, 255, .12); }
.confirm-guide { width: 100%; margin-top: 11px; padding: 11px 14px; border: 1px solid rgba(103, 232, 255, .55); border-radius: 9px; color: #061427; background: #7cecff; font-weight: 800; cursor: pointer; }.confirm-guide:disabled { opacity: .38; cursor: not-allowed; }
.party-status { max-width: 680px; margin: 26px auto 0; text-align: center; color: var(--gold); font: 500 .76rem/1.55 "DM Mono", monospace; }
.pact-rehearsal { max-width: 920px; margin: 28px auto 0; padding: 18px 21px; border: 1px solid rgba(247, 204, 109, .28); border-radius: 16px; background: linear-gradient(115deg, rgba(246, 197, 94, .10), rgba(78, 117, 255, .10)); text-align: center; }
.pact-rehearsal .eyebrow { margin-bottom: 6px; color: var(--gold); }.pact-rehearsal h3 { margin: 0; font: 700 1.35rem/1.1 "Playfair Display", serif; }.pact-rehearsal > p:last-child { max-width: 76ch; margin: 13px auto 0; color: var(--muted); font-size: .82rem; line-height: 1.65; }.pact-rehearsal code { color: var(--blue); font-family: "DM Mono", monospace; }
.rehearsal-roles { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 24px; margin-top: 13px; }.rehearsal-roles p { margin: 0; color: #e5e6ff; font-size: .8rem; }.rehearsal-roles strong { color: var(--blue); }

@media (max-width: 860px) { .character-columns { grid-template-columns: 1fr; max-width: 620px; }.character-card { padding: 16px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Game screen */
.game-body { min-height: 100vh; background: radial-gradient(circle at 52% -14%, rgba(56, 78, 183, .32), transparent 34%), #050817; }
.game-topbar { position: sticky; top: 0; z-index: 8; min-height: 57px; padding: 12px clamp(18px, 3vw, 44px); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; border-bottom: 1px solid rgba(123, 157, 255, .2); background: rgba(5, 8, 23, .82); backdrop-filter: blur(16px); }
.game-brand { color: #f5f4ff; text-decoration: none; font: 700 1.1rem/1 "Playfair Display", serif; }.game-brand span { display: block; margin-top: 3px; color: var(--blue); font: 500 .57rem/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.party-lockup { margin: 0; color: #fff1c5; font: 500 .68rem/1.4 "DM Mono", monospace; text-align: center; }.game-mode { justify-self: end; margin: 0; color: var(--blue); font: 500 .61rem/1.4 "DM Mono", monospace; text-align: right; text-transform: uppercase; }
.world-ticker { position: relative; z-index: 7; display: flex; flex-wrap: nowrap; align-items: center; gap: 15px; min-height: 40px; padding: 7px clamp(18px, 3vw, 44px); border-bottom: 1px solid rgba(247, 204, 109, .23); background: linear-gradient(90deg, rgba(117, 76, 20, .32), rgba(31, 27, 91, .58)); overflow: hidden; }.world-ticker::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,8,23,.6), transparent 12%, transparent 88%, rgba(5,8,23,.6)); }.ticker-label { position: relative; z-index: 1; flex: 0 0 auto; color: var(--gold); font: 500 .62rem/1 "DM Mono", monospace; letter-spacing: .13em; text-transform: uppercase; }.world-ticker p { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: #f7f1e1; font: .75rem/1.4 "DM Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.game-shell { display: grid; grid-template-columns: minmax(220px, 20%) minmax(320px, 40%) minmax(320px, 40%); min-height: calc(100vh - 98px); }
.stats-panel, .chronicle-panel, .tree-panel { min-width: 0; padding: clamp(20px, 2.4vw, 36px); }.stats-panel { border-right: 1px solid rgba(124, 138, 240, .18); background: linear-gradient(180deg, rgba(13, 17, 51, .74), rgba(7, 9, 27, .65)); }.chronicle-panel { border-right: 1px solid rgba(124, 138, 240, .18); background: rgba(6, 9, 25, .54); }.tree-panel { background: radial-gradient(circle at 50% 25%, rgba(54, 112, 179, .19), transparent 42%), rgba(7, 10, 27, .74); }
.stats-panel h1 { margin: 5px 0 0; font: 700 clamp(1.7rem, 2.8vw, 2.55rem)/.98 "Playfair Display", serif; letter-spacing: -.04em; }.level-subtitle { margin: 10px 0 20px; color: var(--muted); font-size: .78rem; line-height: 1.58; }
.point-bank { display: flex; align-items: baseline; justify-content: space-between; margin: 9px 0; padding: 10px 12px; border: 1px solid rgba(103,232,255,.25); border-radius: 10px; background: rgba(58, 151, 196, .07); color: #b9def7; font: .65rem/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .06em; }.point-bank strong { color: var(--blue); font: 700 1.35rem/1 "Playfair Display", serif; }.reflection-bank { border-color: rgba(247,204,109,.25); color: #dfc994; }.reflection-bank strong { color: var(--gold); }
.stat-list { display: grid; gap: 7px; margin-top: 19px; }.stat-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 9px; padding: 9px 0; border-bottom: 1px solid rgba(163, 176, 255, .12); }.stat-row div { display: flex; align-items: baseline; gap: 7px; }.stat-row strong { color: var(--blue); font: 500 .67rem/1 "DM Mono", monospace; }.stat-row span { color: #e8e7f7; font-size: .75rem; }.stat-row b { color: #fff3c9; font: 700 1.1rem/1 "Playfair Display", serif; }.stat-row p { grid-column: 1 / -1; margin: 2px 0 0; color: #8588a9; font-size: .62rem; line-height: 1.45; }.stats-note { margin: 20px 0 0; color: #8385a3; font: .65rem/1.55 "DM Mono", monospace; }
.panel-heading { margin-bottom: 18px; }.panel-heading .eyebrow { margin-bottom: 7px; }.panel-heading h2 { margin: 0; font: 700 clamp(1.55rem, 2.5vw, 2.35rem)/1 "Playfair Display", serif; letter-spacing: -.04em; }.panel-heading p:not(.eyebrow) { max-width: 62ch; margin: 8px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.55; }
.protocol-card { margin-bottom: 17px; padding: 15px 17px; border: 1px solid rgba(103,232,255,.22); border-radius: 13px; background: linear-gradient(125deg, rgba(44, 123, 163, .13), rgba(65, 49, 136, .13)); }.protocol-card .eyebrow { margin-bottom: 5px; }.protocol-card h3 { margin: 0; font: 700 1.1rem/1.05 "Playfair Display", serif; }.protocol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 10px; }.protocol-grid p, .protocol-question { margin: 0; color: #cbccdf; font-size: .69rem; line-height: 1.52; }.protocol-grid strong { color: var(--blue); }.protocol-question { margin-top: 10px; color: #aeb3d5; }.protocol-card code { color: var(--gold); font: .62rem "DM Mono", monospace; }
.chronicle-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }.chronicle-entry { padding: 13px 14px; border: 1px solid rgba(166, 175, 255, .16); border-left: 3px solid #6a6f9b; border-radius: 10px; background: rgba(12, 15, 43, .66); }.chronicle-entry.engine { border-left-color: #7f84aa; }.chronicle-entry.pact { border-left-color: var(--blue); }.chronicle-entry.experiment { border-left-color: #e6b95c; }.chronicle-entry.failed\ attempt, .chronicle-entry.failed\ level-up, .chronicle-entry.ratification\ declined { border-left-color: #ee6e7a; }.chronicle-entry.node\ discovered { border-left-color: #8df5c4; box-shadow: 0 0 20px rgba(95, 221, 173, .08); }.chronicle-entry.level\ up { border-left-color: var(--gold); }.chronicle-entry.retro\ event { border-left-color: #a48bff; }.chronicle-entry h3 { margin: 4px 0 4px; font: 700 .92rem/1.15 "Playfair Display", serif; }.chronicle-entry p:not(.chronicle-type) { margin: 0; color: #b9b9d0; font-size: .7rem; line-height: 1.5; }.chronicle-type { margin: 0; color: #8185ad; font: .56rem/1 "DM Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.tech-tree { display: grid; gap: 10px; }.tree-level { overflow: hidden; border: 1px solid rgba(147, 159, 237, .16); border-radius: 13px; background: rgba(10, 14, 40, .56); }.tree-level > header { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 12px; }.tree-level > header > span { color: #68709e; font: .65rem/1 "DM Mono", monospace; }.tree-level h3 { margin: 0; font: 700 1.02rem/1 "Playfair Display", serif; }.tree-level header p { margin: 3px 0 0; color: #7f83a3; font-size: .62rem; }.tree-level header b { color: #9fa5cd; font: 500 .66rem/1 "DM Mono", monospace; }.tree-level.is-current { border-color: rgba(103,232,255,.5); box-shadow: 0 0 34px rgba(62, 173, 224, .08); }.tree-level.is-current > header { background: rgba(57, 141, 190, .11); }.tree-level.is-current > header > span { color: var(--blue); }.tree-level.is-future { opacity: .52; }.node-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(147, 159, 237, .13); }.tree-node { min-height: 116px; padding: 10px; background: #0b0e2a; }.node-top { display: flex; justify-content: space-between; align-items: center; }.node-top span { display: flex; gap: 3px; }.gem { width: 6px; height: 6px; border: 1px solid #59628d; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }.gem.lit { border-color: #92f8d9; background: #87f6d1; box-shadow: 0 0 9px #6af2d0; }.node-top em { color: #75799d; font: .5rem/1 "DM Mono", monospace; font-style: normal; text-transform: uppercase; }.tree-node h4 { margin: 9px 0 5px; font: 700 .77rem/1.12 "Playfair Display", serif; }.tree-node p { margin: 0; color: #8487a5; font-size: .57rem; line-height: 1.38; }.tree-node.current { background: linear-gradient(135deg, rgba(45, 101, 139, .3), #0c1232); }.tree-node.warm { background: linear-gradient(135deg, rgba(154, 108, 39, .26), #151126); }.tree-node.ready { background: linear-gradient(135deg, rgba(221, 143, 44, .32), #171022); box-shadow: inset 0 0 24px rgba(255, 183, 63, .13); }.tree-node.discovered { background: linear-gradient(135deg, rgba(38, 134, 101, .38), #0b1c2a); }.tree-node.discovered .node-top em { color: #9bf8d8; }.tree-node.future { background: #090b20; }
.event-card { margin-top: 16px; padding: 15px; border: 1px solid rgba(164, 139, 255, .34); border-radius: 13px; background: linear-gradient(135deg, rgba(102, 70, 171, .22), rgba(17, 20, 62, .7)); }.event-card .eyebrow { margin-bottom: 5px; color: #beaefa; }.event-card h3 { margin: 0; font: 700 1.1rem/1 "Playfair Display", serif; }.event-card p:last-child { margin: 8px 0 0; color: #d2cfe9; font-size: .7rem; line-height: 1.55; }
.tool-callout { padding: 13px clamp(18px, 3vw, 44px); border-top: 1px solid rgba(123,157,255,.2); background: #080b20; }.tool-callout .eyebrow { margin-bottom: 3px; }.tool-callout p:last-child { margin: 0; color: #a5aacb; font: .69rem/1.55 "DM Mono", monospace; }
.pulse-cold .game-shell { animation: game-flash-cold .62s ease; }.pulse-warm .game-shell { animation: game-flash-warm .62s ease; }.pulse-hot .game-shell { animation: game-flash-hot .72s ease; }.pulse-success .game-shell { animation: game-flash-success 1.1s ease; }.pulse-level .game-shell { animation: game-flash-level 1.35s ease; }
@keyframes ticker-drift { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(-8%); } } @keyframes game-flash-cold { 45% { filter: sepia(.45) saturate(.8) brightness(.86); } } @keyframes game-flash-warm { 45% { filter: sepia(.55) saturate(1.25) brightness(1.08); } } @keyframes game-flash-hot { 50% { filter: sepia(.85) saturate(1.7) brightness(1.2); } } @keyframes game-flash-success { 45% { filter: hue-rotate(40deg) brightness(1.2); } } @keyframes game-flash-level { 45% { filter: hue-rotate(20deg) saturate(1.5) brightness(1.32); } }
@media (max-width: 1100px) { .game-shell { grid-template-columns: 260px minmax(0, 1fr); }.tree-panel { grid-column: 1 / -1; border-top: 1px solid rgba(124, 138, 240, .18); }.tree-panel .tech-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); }.tree-level.is-current { grid-column: 1 / -1; } }
@media (max-width: 720px) { .game-topbar { grid-template-columns: 1fr auto; }.party-lockup { grid-column: 1 / -1; grid-row: 2; text-align: left; }.game-mode { font-size: .49rem; }.game-shell { display: block; }.stats-panel, .chronicle-panel { border-right: 0; border-bottom: 1px solid rgba(124,138,240,.18); }.tree-panel .tech-tree { grid-template-columns: 1fr; }.protocol-grid { grid-template-columns: 1fr; }.node-list { grid-template-columns: 1fr; }.tree-node { min-height: 84px; }.world-ticker p { white-space: normal; animation: none; }.game-topbar { position: static; } }

/* Landing rehearsal: a scripted chat follows avatar selection. */
body.is-rehearsal-active { height: 100dvh; overflow: hidden; }
.rehearsal-screen { box-sizing: border-box; height: 100dvh; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: clamp(28px, 5vw, 72px); overflow: hidden; background: radial-gradient(circle at 72% 6%, rgba(45, 102, 191, .28), transparent 32%), radial-gradient(circle at 10% 70%, rgba(160, 99, 224, .15), transparent 30%), #060919; }
.rehearsal-header { max-width: 840px; margin: 0 auto 22px; text-align: center; }.rehearsal-header .chapter-kicker { margin-bottom: 9px; }.rehearsal-header h2 { margin: 0; font: 700 clamp(2rem, 4vw, 4rem)/1 "Playfair Display", serif; letter-spacing: -.05em; }.rehearsal-header > p:last-child { max-width: 68ch; margin: 13px auto 0; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.simulated-chat { width: min(100%, 820px); min-height: 0; height: 100%; display: flex; flex-direction: column; margin: 0 auto; overflow: hidden; border: 1px solid rgba(119, 228, 255, .28); border-radius: 20px; background: linear-gradient(150deg, rgba(16, 25, 65, .92), rgba(6, 10, 29, .97)); box-shadow: 0 28px 70px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .06); }
.chat-window-header { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-bottom: 1px solid rgba(137, 172, 255, .18); color: #eff4ff; background: rgba(5, 9, 26, .65); font: .7rem/1 "DM Mono", monospace; }.chat-window-header span:last-child { margin-left: auto; color: #8e94b9; font-size: .59rem; text-transform: uppercase; letter-spacing: .08em; }.presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #85f6cb; box-shadow: 0 0 13px #85f6cb; }
.rehearsal-chat { min-height: 0; display: grid; align-content: start; gap: 13px; margin: 0; padding: clamp(19px, 3vw, 30px); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: rgba(103, 232, 255, .48) transparent; list-style: none; }.chat-message { display: flex; align-items: flex-start; gap: 11px; max-width: min(100%, 650px); }.chat-message.guide { justify-self: end; flex-direction: row-reverse; }.avatar-portrait { flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid rgba(164, 214, 255, .48); border-radius: 50%; background-repeat: no-repeat; box-shadow: 0 0 18px rgba(95, 211, 255, .2); }.avatar-portrait.pip { background-image: url("../images/ai-companion-avatar-grid-v1.png"); background-size: 400% 300%; background-position: 33.333% 0%; }.avatar-portrait.guide { background-image: url("../images/human-helper-avatar-grid-v1.png"); background-size: 400% 300%; background-position: 0% 0%; border-color: rgba(255, 204, 109, .55); box-shadow: 0 0 18px rgba(255, 204, 109, .16); }
.chat-message > div { padding: 11px 14px; border: 1px solid rgba(119, 216, 255, .25); border-radius: 5px 15px 15px 15px; background: rgba(20, 56, 101, .32); }.chat-message.guide > div { border-color: rgba(247, 204, 109, .3); border-radius: 15px 5px 15px 15px; background: rgba(103, 63, 104, .28); }.chat-speaker { margin: 0 0 5px; color: var(--blue); font: 500 .57rem/1 "DM Mono", monospace; letter-spacing: .07em; text-transform: uppercase; }.chat-message.guide .chat-speaker { color: var(--gold); }.chat-message p:last-child { margin: 0; color: #f3f4ff; font-size: .82rem; line-height: 1.55; }
.rehearsal-status-bar { width: min(100%, 820px); margin: 16px auto 0; padding: 16px 18px; border: 1px solid rgba(247, 204, 109, .36); border-left: 4px solid var(--gold); border-radius: 14px; background: linear-gradient(105deg, rgba(247, 204, 109, .14), rgba(93, 89, 191, .15)); }.rehearsal-status-bar .eyebrow { margin-bottom: 5px; color: var(--gold); }.rehearsal-status-bar h3 { margin: 0; font: 700 1.1rem/1.15 "Playfair Display", serif; }.rehearsal-status-bar p:last-child { margin: 7px 0 0; color: #e1dfcf; font: .76rem/1.6 "DM Mono", monospace; }
.graduation-overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; box-sizing: border-box; padding: 24px; overflow: auto; background: rgba(2, 4, 17, .78); backdrop-filter: blur(11px); }.graduation-overlay[hidden] { display: none; }.graduation-card { position: relative; width: min(100%, 880px); min-height: min(620px, calc(100dvh - 48px)); display: grid; align-items: end; overflow: hidden; border: 1px solid rgba(163, 209, 255, .45); border-radius: 24px; background: #07102e; box-shadow: 0 34px 100px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 255, 255, .1); }.graduation-art { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 6, 21, .96) 0%, rgba(3, 6, 21, .47) 47%, rgba(3, 6, 21, .05) 100%), url("../images/pact-graduation-journey.png") center / cover no-repeat; }.graduation-copy { position: relative; z-index: 1; max-width: 650px; padding: clamp(30px, 6vw, 64px); }.graduation-copy .chapter-kicker { margin-bottom: 11px; color: var(--gold); }.graduation-copy h2 { margin: 0; color: #fff9dd; font: 700 clamp(2.3rem, 5vw, 4.4rem)/.98 "Playfair Display", serif; letter-spacing: -.055em; }.graduation-copy > p:not(.chapter-kicker) { max-width: 58ch; margin: 18px 0 0; color: #e3e8ff; font-size: clamp(.92rem, 1.55vw, 1.05rem); line-height: 1.7; }.graduation-copy > p:not(.chapter-kicker) + p:not(.chapter-kicker) { margin-top: 9px; color: #ffe7a9; font: 600 .78rem/1.7 "DM Mono", monospace; }.begin-game { margin-top: 28px; padding: 13px 19px; border: 1px solid rgba(255, 229, 147, .7); border-radius: 10px; color: #14162f; background: linear-gradient(135deg, #ffdfa1, #f4bd56); box-shadow: 0 11px 28px rgba(246, 190, 79, .28); font: 800 .8rem "DM Mono", monospace; letter-spacing: .03em; cursor: pointer; }.begin-game:hover, .begin-game:focus-visible { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(246, 190, 79, .42); }.begin-game:focus-visible { outline: 3px solid #93f1ff; outline-offset: 3px; }
@media (max-width: 640px) { .rehearsal-screen { padding: 26px 16px; }.rehearsal-header > p:last-child { font-size: .8rem; }.rehearsal-chat { padding: 18px 14px; }.avatar-portrait { flex-basis: 34px; width: 34px; height: 34px; }.chat-message p:last-child { font-size: .75rem; }.chat-window-header { padding: 12px 14px; }.rehearsal-status-bar { padding: 14px; } }