/* Path of Living · quiz screen. Adapted from prototype.html v2, the reference
   implementation (DECISIONS §8). Two rules below are MEASUREMENT GUARDS, not
   styling choices, recorded in DECISIONS §8 — do not polish them away:
   · the two option boxes are visually IDENTICAL (visual asymmetry between
     poles is a bias);
   · the four circles differ in visual size but their hit areas are equal and
     ≥44pt, or slight answers cost more effort than strong ones and
     extremeness inflates. */

* { box-sizing: border-box; margin: 0; touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: system-ui, sans-serif; background: #06090f; color: #cfd6e4;
       display: flex; justify-content: center;
       -webkit-tap-highlight-color: transparent; }

#frame { position: relative; width: 100%; max-width: 430px; min-height: 100dvh;
         overflow: hidden; display: flex; flex-direction: column; gap: 12px;
         padding: calc(16px + env(safe-area-inset-top)) 18px
                  calc(60px + env(safe-area-inset-bottom));
         background:
           radial-gradient(ellipse 120% 45% at 50% 108%, rgba(24,48,34,.85), rgba(24,48,34,0) 70%),
           linear-gradient(#070c16 0%, #0a1322 55%, #0d1a27 100%); }
@media (min-width: 640px) {
  body { padding: 24px; align-items: flex-start; }
  #frame { min-height: 760px; border: 1px solid #2a3242; border-radius: 12px; }
}

/* fireflies — spawned in top/bottom margins only (quiz.js), so they never
   cross behind text being read (DECISIONS §8) */
.fly { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #d8f2a8;
       box-shadow: 0 0 8px 2px rgba(205,240,150,.55); opacity: 0; pointer-events: none;
       animation: drift 9s linear infinite; }
@keyframes drift {
  0% { opacity: 0; transform: translate(0,0); }
  12% { opacity: .85; } 45% { opacity: .25; } 60% { opacity: .7; }
  100% { opacity: 0; transform: translate(26px,-58px); } }

/* positioned + raised so fireflies (unpositioned band dwellers) can never
   drift across this text (DECISIONS §8) */
#banner { font-size: 12px; color: #9fb0c8; border-bottom: 1px solid rgba(255,255,255,.14);
          padding-bottom: 6px; position: relative; z-index: 2; }
#progressWrap { font-size: 11px; color: #7787a0; position: relative; z-index: 2; }
#bar { height: 3px; background: rgba(255,255,255,.12); margin-top: 3px; }
#bar div { height: 3px; background: #cde39a; width: 0; transition: width .25s; }

#screen { display: flex; flex-direction: column; flex: 1; z-index: 2; }

/* --qboxH / --optH are measured at runtime from the longest rendered item
   (measure.js), so box and circle positions never shift between items */
.qbox { background: rgba(13,20,34,.62); border: 1px solid rgba(255,255,255,.18);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px); border-radius: 10px; padding: 16px 15px; min-height: 118px;
        height: var(--qboxH, auto);
        font-size: 19px; line-height: 1.5; color: #e9edf5; margin-top: 6px; }
.blank { border-bottom: 1.5px solid #e9edf5; padding: 0 2px; min-width: 70px; display: inline-block; }
.blank.empty { border-bottom-color: rgba(233,237,245,.5); }

/* MEASUREMENT GUARD: one .opt rule serves both boxes — identical on purpose */
.opts { display: flex; gap: 10px; margin-top: 12px; align-items: stretch; }
.opt { flex: 1 1 0; background: rgba(13,20,34,.55); border: 1px solid rgba(255,255,255,.22);
       -webkit-backdrop-filter: blur(6px);
       backdrop-filter: blur(6px); border-radius: 10px; padding: 12px 11px;
       height: var(--optH, auto);
       font-size: 15px; line-height: 1.35; color: #dfe5f0; display: flex; align-items: center; }
.opt.armedSide { border-color: rgba(214,235,170,.75); }

/* MEASUREMENT GUARD: every .circle button is 64×64 (>44pt) regardless of the
   visual size of the inner disc */
.circles { display: flex; margin-top: 14px; }
.cwrap { flex: 1 1 0; display: flex; align-items: center; justify-content: center; }
.circle { width: 64px; height: 64px; background: none; border: none; cursor: pointer;
          display: flex; align-items: center; justify-content: center; padding: 0; }
.circle i { display: block; border-radius: 50%; border: 1.5px solid #b9c6dd;
            background: rgba(20,30,48,.5); }
.circle.big i { width: 52px; height: 52px; }
.circle.small i { width: 34px; height: 34px; }
.circle.armed i { border-color: #e6f3c0; background: rgba(160,200,110,.25);
                  box-shadow: 0 0 14px 3px rgba(205,240,150,.65);
                  animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 22px 6px rgba(205,240,150,.85); } }
#hint { min-height: 16px; font-size: 12px; color: #93a55f; text-align: center; margin-top: 4px; }

/* The orb is a small sun: breathing glow, slow-turning flare rays that fade in
   as it grows (--flare, set per answer), and a hue that warms green→gold via
   an inline hue-rotate. Continuous animation is decorative — off under
   reduced motion and .noanim. */
#orb { position: absolute; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
       transform: translateX(-50%); border-radius: 50%;
       background: radial-gradient(circle at 38% 32%, #fdffe9, #e9f7b4 30%, #b9d97e 55%, #5c7a3a 82%);
       box-shadow: 0 0 14px 4px rgba(200,235,140,.5);
       transition: width .3s, height .3s, filter .6s;
       animation: orbBreathe 3.6s ease-in-out infinite; }
#orb::after { content: ''; position: absolute; inset: -60%; border-radius: 50%;
       background: repeating-conic-gradient(rgba(245,255,210,0) 0deg 11deg,
                   rgba(245,255,210,.4) 15deg, rgba(245,255,210,0) 19deg 30deg);
       -webkit-mask-image: radial-gradient(circle, transparent 32%, #000 48%, transparent 74%);
       mask-image: radial-gradient(circle, transparent 32%, #000 48%, transparent 74%);
       opacity: var(--flare, 0); animation: orbSpin 18s linear infinite; }
@keyframes orbSpin { to { transform: rotate(360deg); } }
@keyframes orbBreathe {
  0%, 100% { box-shadow: 0 0 14px 4px rgba(200,235,140,.45), 0 0 42px 12px rgba(200,235,140,.10); }
  50%      { box-shadow: 0 0 24px 8px rgba(225,250,175,.80), 0 0 64px 20px rgba(225,250,175,.22); } }
/* pop replaces breathe for one flash (an animation always beats a class's
   static box-shadow, so the flash must itself be an animation) */
#orb.pop { animation: orbPop .32s ease-out; }
@keyframes orbPop {
  0%   { transform: translateX(-50%) scale(1.45);
         box-shadow: 0 0 40px 14px rgba(235,255,190,.95), 0 0 110px 34px rgba(235,255,190,.40); }
  100% { transform: translateX(-50%) scale(1);
         box-shadow: 0 0 14px 4px rgba(200,235,140,.45), 0 0 42px 12px rgba(200,235,140,.10); } }

@media (prefers-reduced-motion: reduce) {
  #orb, #orb::after, .fly, .circle.armed i, .cell.hot.settle { animation: none; }
  .axisSheet { transition: none; }
}
.noanim #orb, .noanim #orb::after, .noanim .fly,
.noanim .circle.armed i, .noanim .cell.hot.settle { animation: none; }

.navrow { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.navrow button, .wide { font-size: 14px; padding: 8px 12px; background: rgba(13,20,34,.6);
      border: 1px solid rgba(255,255,255,.3); color: #dfe5f0; cursor: pointer; border-radius: 8px; }
.wide { width: 100%; margin-top: 12px; text-align: left; font-size: 16px; padding: 12px; }
input[type=text] { font-size: 17px; padding: 11px; border: 1px solid rgba(255,255,255,.3);
      background: rgba(13,20,34,.6); color: #e9edf5; width: 100%; border-radius: 8px; }
.err { color: #e8a0a0; font-size: 13px; min-height: 16px; }
.help { font-size: 13px; color: #93a0b5; line-height: 1.4; }
h2 { font-size: 17px; font-weight: 600; color: #e9edf5; }
.soft { color: #8a97ad; font-size: 13px; line-height: 1.45; }

/* ------------------------------------------------------------------ result
   Seven paged frames (docs/design/frame-placement.html), scroll-snap paging.
   Pages are transparent so the meadow and the full-grown sun stay visible. */
#screen.paged { position: absolute; inset: 0; z-index: 2; display: block;
  overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; }
/* `safe center` + per-frame scroll: with font scaling or browser zoom a frame
   can outgrow the viewport, and plain flex centering clips the top lines
   unreachably; `safe` falls back to start-aligned and the frame scrolls */
.rframe { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; gap: 14px;
  justify-content: center; justify-content: safe center; overflow-y: auto;
  padding: calc(22px + env(safe-area-inset-top)) 20px
           calc(64px + env(safe-area-inset-bottom)); }
#rf1 { justify-content: flex-start; }
#rf1 .reveal { margin: auto 0; }
.wordmark { font-size: 11px; letter-spacing: .18em; color: #6d7a92; }

/* reveal per sketch p12: bubbled THE, coordinate boxed on a contrasting
   color base ("box is part of design"), preposition line aligned under */
.revYou { font-size: 16px; color: #9aa8bf; }
.revThe { font-size: 30px; font-weight: 800; letter-spacing: .1em; margin-top: 10px;
  color: transparent; -webkit-text-stroke: 1.5px #e9edf5; }
@supports not (-webkit-text-stroke: 1px #fff) { .revThe { color: #e9edf5; } }
.coordBox { display: inline-block; margin-top: 8px; padding: 10px 16px;
  background: #cde39a; color: #0a1322; border-radius: 12px;
  font-size: 27px; font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 0 24px rgba(205,227,154,.25); }
.revState { font-size: 18px; color: #cfd6e4; margin-top: 12px; }
.revState b { color: #cde39a; font-weight: 600; }
.reveal.small .revThe { font-size: 20px; -webkit-text-stroke-width: 1px; }
.reveal.small .coordBox { font-size: 19px; padding: 7px 12px; border-radius: 9px; }
.reveal.small .revState { font-size: 14px; margin-top: 8px; }
.swipeCue { text-align: center; color: #4a566c; font-size: 17px; }

/* recap header on the frames after the breakdowns (sketch p13) */
.recap { position: absolute; top: calc(18px + env(safe-area-inset-top)); right: 20px;
  text-align: right; font-size: 12px; line-height: 1.5; color: #9aa8bf; }
.rlabel { font-size: 11px; letter-spacing: .14em; color: #6d7a92; margin-bottom: 4px; }

.axisRow { display: block; width: 100%; background: none; border: none; padding: 8px 0;
  cursor: pointer; text-align: left; color: inherit; font: inherit; }
.lbl { display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #9aa8bf; }
/* sketch p12: the user's pole boxed, the unselected one faded */
.winChip { border: 1.5px solid rgba(205,227,154,.8); background: rgba(205,227,154,.12);
  border-radius: 6px; padding: 3px 8px; color: #e6f3c0; }
.loseLbl { opacity: .45; }
.bar { display: block; height: 10px; background: rgba(255,255,255,.1); border-radius: 5px;
  margin-top: 7px; overflow: hidden; }
.bar span { display: block; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #9fbf6a, #cde39a); }

.diamond { width: 150px; height: 150px; margin: 34px auto; transform: rotate(45deg);
  display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 5px; }
.cell { border: 1px solid rgba(255,255,255,.22); border-radius: 5px; }
.cell.hot { border: 3px solid #cde39a; box-shadow: 0 0 12px rgba(205,240,150,.4); }
/* slot-machine-like landing when the diamond scrolls into view (sketch p13) */
.cell.hot.settle { animation: cellSettle .9s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cellSettle {
  0%   { transform: scale(.55); box-shadow: 0 0 34px rgba(205,240,150,.95); }
  55%  { transform: scale(1.14); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(205,240,150,.4); } }
.mini { font-size: 12px; color: #9aa8bf; text-align: center; }

.panel { background: rgba(13,20,34,.62); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px); border-radius: 10px; padding: 16px 15px; }
/* speech bubble (sketch p13); the silhouette + background scene arrive with
   the 22-asset set */
.voicePanel { position: relative; border-radius: 14px; }
.voicePanel::after { content: ''; position: absolute; left: 34px; bottom: -11px;
  width: 0; height: 0; border-left: 11px solid transparent;
  border-right: 5px solid transparent;
  border-top: 12px solid rgba(255,255,255,.16); }
.voicePanel::before { content: ''; position: absolute; left: 35px; bottom: -9px;
  width: 0; height: 0; border-left: 10px solid transparent;
  border-right: 4px solid transparent;
  border-top: 11px solid rgba(13,20,34,.95); z-index: 1; }
.voice { font-size: 15px; line-height: 1.6; color: #dbe2ee; font-style: italic; }
.voice p + p { margin-top: 10px; }
.rbody { font-size: 15.5px; line-height: 1.6; color: #e6ebf4; }
.contrast { border-style: dashed; border-color: rgba(255,255,255,.28); }
.x1 { font-size: 15px; color: #d8e6a9; line-height: 1.5; }
.contrastLine { font-size: 13.5px; color: #9aa8bf; line-height: 1.5; margin-top: 10px; }

.shareFrame { text-align: center; }
.shareRow { display: flex; justify-content: center; margin-top: 8px; }
.shareRow button { display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; background: rgba(13,20,34,.6); border: 1px solid rgba(255,255,255,.3);
  color: #dfe5f0; border-radius: 8px; cursor: pointer; }
.shareNote { min-height: 16px; font-size: 12px; color: #93a55f; }
.methodLink { margin-top: auto; margin-bottom: 16px; align-self: center; font-size: 12px;
  color: #7787a0; text-decoration: none; border-bottom: 1px solid rgba(119,135,160,.4);
  padding-bottom: 1px; }

/* axis detail: a separate full page sliding in from the right (sketch p12's
   right-swipe transition; user 2026-08-10: "not pop-up, separate pages") */
.axisSheet { position: absolute; inset: 0; z-index: 6; overflow-y: auto;
  padding: calc(22px + env(safe-area-inset-top)) 20px
           calc(40px + env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 120% 45% at 50% 108%, rgba(24,48,34,.9), rgba(24,48,34,0) 70%),
    linear-gradient(#070c16 0%, #0a1322 55%, #0d1a27 100%);
  transform: translateX(102%); transition: transform .3s ease-out; }
.axisSheet.open { transform: none; }
.noanim .axisSheet { transition: none; }
.sheetBack { background: none; border: none; color: #9aa8bf; font: inherit;
  font-size: 14px; cursor: pointer; padding: 0 0 14px; text-align: left; display: block; }
.axisIntro { font-size: 14px; color: #c3ccdb; margin: 6px 0 12px; line-height: 1.5; }
.bandLine { font-size: 13.5px; color: #d8e6a9; line-height: 1.5; margin: 12px 0; }
.polePara { font-size: 14.5px; color: #c3ccdb; line-height: 1.55; margin-top: 12px; }
.polePara b { color: #e6ebf4; }
.polePara.faded { opacity: .5; }

/* letter-scatter (scatter.js). Timing vars --outT/--inT are set from the
   runtime speed option; the speed itself is undecided (DECISIONS §8). */
.ch { display: inline-block; }
.word { display: inline-block; }
.anim-out .ch { animation: chOut var(--outT, .18s) forwards; }
.anim-in  .ch { opacity: 0; animation: chIn var(--inT, .22s) forwards; }
@keyframes chOut { to { opacity: 0; transform: translateY(-12px); } }
@keyframes chIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.noanim .ch, .noanim .anim-out .ch, .noanim .anim-in .ch { animation: none; opacity: 1; transform: none; }