/* Where in the Word — ported from reference.html. Tokens, type, themes and
   safe-area handling are the prototype's. Tier colors are set by tiers.mjs
   (--tier*-light / --tier*-dark); the CSS only reads them. */
:root{
  --bg:#f1f1ec; --surface:#fafaf6; --fg:#1f2622; --fg2:#616a62;
  --btn:#1f2622; --btnFg:#eff3ee; --accent:#2f5b4e; --accentRing:rgba(47,91,78,.45);
  --tierG:var(--tierG-light,#2f5b4e); --tierY:var(--tierY-light,#8a6a1f); --tierR:var(--tierR-light,#9e4a34);
  --cellA:#dfe6e0; --cellB:#ccd7cf; --cellBook:#a9bbae; --ansBook:#9fc0b0;
  --line:rgba(31,38,34,.10);
  --serif:"New York", ui-serif, "EB Garamond", Georgia, serif;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121714; --surface:#1b221e; --fg:#eff3ee; --fg2:#bcc4b8;
    --btn:#eff3ee; --btnFg:#1f2622; --accent:#8fbfa9; --accentRing:rgba(143,191,169,.45);
    --tierG:var(--tierG-dark,#8fbfa9); --tierY:var(--tierY-dark,#d4aa52); --tierR:var(--tierR-dark,#dc8565);
    --cellA:#222b26; --cellB:#2c3731; --cellBook:#4b5e53; --ansBook:#3d6657;
    --line:rgba(239,243,238,.10); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121714; --surface:#1b221e; --fg:#eff3ee; --fg2:#bcc4b8;
  --btn:#eff3ee; --btnFg:#1f2622; --accent:#8fbfa9; --accentRing:rgba(143,191,169,.45);
  --tierG:var(--tierG-dark,#8fbfa9); --tierY:var(--tierY-dark,#d4aa52); --tierR:var(--tierR-dark,#dc8565);
  --cellA:#222b26; --cellB:#2c3731; --cellBook:#4b5e53; --ansBook:#3d6657;
  --line:rgba(239,243,238,.10); color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible,.map:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}

.app{max-width:430px;margin:0 auto;padding:0 20px 32px}
.screen{display:flex;flex-direction:column;min-height:100%}

/* shared type */
.eyebrow{font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.serif{font-family:var(--serif);font-weight:400}

/* buttons */
.primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:54px;border-radius:27px;background:var(--btn);color:var(--btnFg);font:600 15px/1 var(--sans);text-decoration:none}
.primary[disabled]{opacity:.5;cursor:default}
.ghost{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:23px;border:1px solid var(--line);font:500 14px/1 var(--sans);color:var(--fg);text-decoration:none}
.textbtn{font:500 14px/1 var(--sans);color:var(--accent);padding:10px 4px;text-decoration:none}
.iconbtn{width:40px;height:40px;border-radius:20px;display:grid;place-items:center;background:var(--surface)}
.iconbtn svg{width:16px;height:16px}

/* ---------- start ---------- */
.s-top{display:flex;align-items:center;justify-content:space-between;padding:22px 0 0}
.wordmark{font:500 19px/1 var(--serif);letter-spacing:-.01em;text-decoration:none}
.wordmark{display:inline-flex;align-items:center;gap:8px}
.logo{width:24px;height:24px;flex:none;background:var(--logo,var(--fg));-webkit-mask:url(/word/mark.png) center/contain no-repeat;mask:url(/word/mark.png) center/contain no-repeat}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--logo:#fff}}
:root[data-theme="dark"]{--logo:#fff}
.s-head{padding:34px 0 26px}
.s-head .eyebrow{margin-bottom:14px}
.s-head h1{margin:0;font:400 44px/1.02 var(--serif);letter-spacing:-.02em}
.s-head p{margin:14px 0 0;font:400 16px/1.45 var(--sans);color:var(--fg2);max-width:32ch}
.s-cta{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:6px}
.s-done{margin-top:26px;text-align:center}
.s-done .big{font:400 40px/1 var(--serif);letter-spacing:-.02em}
.s-done .sub{margin:8px 0 18px;color:var(--fg2);font-size:14px}
.s-done .ghost{margin:10px auto 0;display:inline-flex}
.s-foot{margin-top:40px;display:flex;justify-content:center;gap:18px;font-size:13px;color:var(--fg2)}
.s-foot a{text-decoration:none}

/* ---------- map ---------- */
.map{position:relative;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.map.static{touch-action:auto}
.sec + .sec{margin-top:9px}
.sec-label{font:500 11px/1 var(--sans);color:var(--fg2);margin:0 0 5px;letter-spacing:.01em}
.cells{display:grid;grid-template-columns:repeat(36,minmax(0,1fr));gap:2px}
.cells i{display:block;aspect-ratio:1;border-radius:2px;background:var(--cellA);position:relative}
.cells i.b{background:var(--cellB)}
.live .cells i{cursor:pointer}
.cells i.book{background:var(--cellBook)}
.cells i.ansbook{background:var(--ansBook)}
.cells i.hot{background:var(--fg);transform:scale(1.9);z-index:3;border-radius:1.5px;box-shadow:0 0 0 1px var(--bg)}
.cells i.guess{background:var(--tierR);transform:scale(1.7);z-index:4;box-shadow:0 0 0 1px var(--bg)}
.cells i.guess.y{background:var(--tierY)}
.cells i.guess.g{background:var(--tierG)}
.cells i.answer{background:var(--fg);transform:scale(1.7);z-index:5;box-shadow:0 0 0 1.5px var(--bg)}
.cells i.answer.pulse{animation:pulse 1.6s ease-out 2}
.cells i.answer.perfect{background:var(--accent);animation:pulse 1.6s ease-out 3}
@keyframes pulse{0%{box-shadow:0 0 0 1.5px var(--bg),0 0 0 1.5px var(--accentRing)}100%{box-shadow:0 0 0 1.5px var(--bg),0 0 0 12px transparent}}
.intro .cells i{animation:fillIn .45s ease-out both;animation-delay:calc(var(--i) * .9ms)}
@keyframes fillIn{from{opacity:.0;transform:scale(.4)}to{opacity:1;transform:none}}

/* ---------- play ---------- */
.p-bar{display:flex;align-items:center;gap:10px;padding:18px 0 14px}
.count{font:600 14px/1 var(--sans)}
.chip{font:600 12px/1 var(--sans);padding:6px 9px;border-radius:12px;background:var(--surface);color:var(--accent)}
.spacer{flex:1}
.total{font:400 24px/1 var(--serif);letter-spacing:-.01em;min-width:2ch;text-align:right}
.verse{background:var(--surface);border-radius:26px;padding:24px 24px 18px;display:flex;flex-direction:column;gap:14px;min-height:150px;transition:box-shadow .5s ease}
.verse p{margin:0;font:400 23px/1.45 var(--serif);letter-spacing:-.01em;text-wrap:pretty}
.verse p.m{font-size:20px;line-height:1.45}
.verse p.s{font-size:18px;line-height:1.45}
.v-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto}
.v-ref{font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.v-ref.shown{color:var(--accent)}
.v-label{display:block;margin-bottom:10px;font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.v-pts{font:400 22px/1 var(--serif);letter-spacing:-.01em}
.v-pts small{font:500 12px/1 var(--sans);color:var(--fg2);margin-left:6px;letter-spacing:0}
.readout{padding:4px 2px 16px}
#playTiles,#playBooks{margin-top:24px}
.ro-main{font:400 22px/1.2 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.ro-sub{font:400 13px/1.35 var(--sans);color:var(--fg2);margin-top:4px}
.ro-sub:empty{display:none}
.next{height:46px;padding:0 20px;border-radius:23px;background:var(--btn);color:var(--btnFg);font:600 14px/1 var(--sans);flex:none}

/* ---------- results ---------- */
.r-top{display:flex;align-items:center;justify-content:space-between;padding:22px 0 0}
.r-score{padding:30px 0 6px}
.r-score .num{font:400 76px/.9 var(--serif);letter-spacing:-.03em}
.r-score .of{font:400 15px/1 var(--sans);color:var(--fg2);margin-top:10px}
.band{font:400 24px/1.25 var(--serif);letter-spacing:-.01em;margin:18px 0 22px}
.rlist{list-style:none;margin:0 0 22px;padding:0;background:var(--surface);border-radius:22px}
.rlist li{display:flex;align-items:center;gap:12px;padding:14px 18px;font:500 14px/1.2 var(--sans)}
.rlist li + li{border-top:1px solid var(--line)}
.dot{width:10px;height:10px;border-radius:5px;flex:none;background:var(--tierR)}
.dot.g{background:var(--tierG)} .dot.y{background:var(--tierY)}
.rref{flex:1}
.rpts{font:400 18px/1 var(--serif)}
.rpts small{font:500 11px/1 var(--sans);color:var(--fg2);margin-left:5px}
.r-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
.countdown{font:400 13px/1 var(--sans);color:var(--fg2);margin-top:8px}
#levelNote{margin-top:-2px}
.footprint h4{margin:0 0 12px;font:400 20px/1.2 var(--serif)}
.legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--fg2)}
.legend span{display:flex;align-items:center;gap:6px}
.legend i{width:8px;height:8px;border-radius:2px;display:block}

/* ---------- sheet + toast ---------- */
.scrim{position:fixed;inset:0;background:rgba(18,23,20,.36);display:flex;align-items:flex-end;justify-content:center;z-index:20;animation:fade .2s ease-out}
.sheet{width:100%;max-width:430px;background:var(--bg);border-radius:26px 26px 0 0;padding:26px 24px calc(28px + env(safe-area-inset-bottom,0px));animation:rise .28s cubic-bezier(.2,.8,.2,1)}
.sheet h2{margin:0 0 16px;font:400 28px/1.1 var(--serif);letter-spacing:-.01em}
.sheet ol{margin:0 0 22px;padding:0;list-style:none;counter-reset:s}
.sheet li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;padding:11px 0;font-size:15px;line-height:1.45;border-top:1px solid var(--line)}
.sheet li::before{content:counter(s);font:400 17px/1.3 var(--serif);color:var(--accent)}
.tiers{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px;font-size:13px;color:var(--fg2)}
.tiers span{display:flex;align-items:center;gap:6px}
.sharebox{width:100%;min-height:96px;margin:0 0 16px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:400 15px/1.45 var(--sans);resize:none}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--btn);color:var(--btnFg);font:500 14px/1 var(--sans);padding:14px 18px;border-radius:22px;z-index:30;animation:rise .25s ease-out}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translate(var(--tx,0),16px);opacity:0}}
.toast{--tx:-50%}

/* ---------- small pages (privacy) ---------- */
.page h1{margin:0 0 6px;font:400 36px/1.05 var(--serif);letter-spacing:-.02em}
.page .updated{margin:0 0 28px;color:var(--fg2);font-size:13px}
.page h2{margin:26px 0 8px;font:400 22px/1.2 var(--serif)}
.page p{margin:0 0 12px;font:400 15px/1.55 var(--sans);color:var(--fg2)}
.page a{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition:none!important}
}

/* ---------- start: one screen, three modes (2026-10-01) ---------- */
.s-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0 36px;min-height:66vh}
.s-hero .eyebrow{margin-bottom:16px}
.s-hero h1{margin:0;font:400 48px/1.02 var(--serif);letter-spacing:-.02em}
.s-lines{margin:18px auto 0;max-width:32ch;font:400 17px/1.55 var(--sans);color:var(--fg2);text-align:center;text-wrap:balance}
.modes{display:flex;gap:4px;width:100%;max-width:380px;margin:30px 0 0;padding:4px;border-radius:20px;background:var(--surface)}
.mode{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:16px}
.mode b{font:600 14px/1 var(--sans)}
.mode span{font:400 11.5px/1 var(--sans);color:var(--fg2);white-space:nowrap}
.mode[aria-checked="true"]{background:var(--btn);color:var(--btnFg)}
.mode[aria-checked="true"] span{color:var(--btnFg);opacity:.72}
.s-hero .s-cta,.s-hero .s-done{width:100%;max-width:340px}
.s-hero .s-cta{margin-top:62px}
.s-hero .s-done{margin-top:62px}
.s-done .ghost{margin:10px auto 0;display:inline-flex}

/* ---------- tiles: the Easy and Medium maps ---------- */
.tiles{display:grid;gap:10px}
.tiles.two{grid-template-columns:1fr 1fr}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:18px;border-radius:18px;background:var(--surface);text-align:left;border:2px solid transparent;transition:transform .12s ease-out}
.tiles.two .tile{min-height:150px;justify-content:flex-end}
.tile b{font:400 21px/1.1 var(--serif);letter-spacing:-.01em}
.tile span{font:400 12px/1.35 var(--sans);color:var(--fg2)}
.live .tile:active{transform:scale(.98)}
.tile.answer{border-color:var(--fg)}
.tile.answer.perfect{border-color:var(--accent)}
.tile.guess{border-color:var(--tierR)}
.tile.guess.y{border-color:var(--tierY)}
.tile.guess.g{border-color:var(--tierG)}
.mode-tag{font:500 12px/1 var(--sans);color:var(--fg2);padding:6px 9px;border-radius:12px;background:var(--surface)}

/* ---------- results: a score card, then a card per verse (2026-10-01) ---------- */
.r-card{margin-top:18px;background:var(--surface);border-radius:26px;padding:24px 20px 20px}
.r-card .r-score{display:flex;align-items:baseline;gap:8px;padding:0}
.r-card .r-score .num{font:400 64px/.9 var(--serif);letter-spacing:-.03em}
.r-card .r-score .of{font:400 16px/1 var(--sans);color:var(--fg2);margin:0}
.r-card .band{margin:14px 0 22px;font-size:21px}
.r-bars{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px}
.r-bars li{display:grid;grid-template-columns:22px 1fr 48px;align-items:center;gap:10px}
.r-bars .q{font:600 12px/1 var(--sans);color:var(--fg2)}
.r-bars .pts{font:400 17px/1 var(--serif);text-align:right}
.bar{height:10px;border-radius:5px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:5px;background:var(--tierR);transform-origin:left center;animation:barGrow .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--n) * 90ms + 150ms)}
.bar i.y{background:var(--tierY)}
.bar i.g{background:var(--tierG)}
@keyframes barGrow{from{transform:scaleX(0)}}
.r-card .r-actions{gap:10px}
.r-next{text-align:center;margin-top:14px}
.r-section{margin:34px 0 12px;font:500 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--fg2)}
.r-detail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.d-card{background:var(--surface);border-radius:22px;padding:16px 18px 18px;min-width:0}
.d-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.d-q{font:600 13px/1 var(--sans);color:var(--fg2)}
.d-card .chip{padding:4px 7px;font-size:11px;background:var(--bg)}
.d-head .dot{width:9px;height:9px}
.d-pts{font:400 18px/1 var(--serif)}
.d-verse{margin:0 0 14px;font:400 17px/1.45 var(--serif);letter-spacing:-.005em;text-wrap:pretty}
.d-vis{margin:0 0 14px}
.d-card .tile{background:var(--bg)}
.tiles.mini{gap:8px}
.tiles.mini .tile{min-height:0;padding:12px 14px;border-radius:14px;justify-content:flex-start}
.tiles.two.mini .tile{min-height:0}
.tiles.mini .tile b{font-size:17px}
.d-ref{font:600 14px/1.2 var(--sans)}
.d-line{margin-top:4px;font:400 13.5px/1.45 var(--sans);color:var(--fg2)}

/* ---------- the book picker: Advanced (2026-10-06) ---------- */
.picker{scroll-margin-top:12px}
.pk-sec{font:500 11px/1 var(--sans);color:var(--fg2);margin:18px 0 8px;letter-spacing:.01em}
.pk-sec:first-child{margin-top:4px}
.pk-books{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:4px}
.pk-book{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:7px;background:var(--cellA);color:var(--fg);transition:transform .12s ease-out,background .12s}
.pk-book.b{background:var(--cellB)}
.pk-book b{font:600 12.5px/1 var(--sans);letter-spacing:-.01em;white-space:nowrap}
.pk-book small{font:500 10px/1 var(--sans);color:var(--fg2)}
.pk-book:hover{background:var(--cellBook)}
.pk-book:active{transform:scale(.94)}
.pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 14px}
.pk-back{font:500 14px/1 var(--sans);color:var(--accent);padding:10px 0}
.pk-name{font:400 20px/1.1 var(--serif);letter-spacing:-.01em}
.pk-chaps{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:4px}
.pk-chap{aspect-ratio:1;border-radius:6px;background:var(--cellA);font:600 13px/1 var(--sans);color:var(--fg);transition:transform .12s ease-out,background .12s}
.pk-chap.b{background:var(--cellB)}
.pk-chap:not([disabled]):hover{background:var(--cellBook)}
.pk-chap:not([disabled]):active{transform:scale(.92)}
.pk-chap[disabled]{cursor:default;opacity:.6}
.pk-chap.answer{opacity:1;background:var(--fg);color:var(--bg)}
.pk-chap.answer.perfect{background:var(--accent)}
.pk-chap.guess{opacity:1;background:var(--tierR);color:var(--bg)}
.pk-chap.guess.y{background:var(--tierY)}
.pk-chap.guess.g{background:var(--tierG)}

/* ---------- the By Heart tile on results (2026-10-06) ---------- */
:root{--promo-bg:#2f5b4e;--promo-fg:#eff3ee;--promo-dim:rgba(239,243,238,.72)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--promo-bg:#24403a}}
:root[data-theme="dark"]{--promo-bg:#24403a}
.promo{display:block;position:relative;overflow:hidden;margin:34px 0 26px;padding:26px 24px 0;border-radius:28px;background:var(--promo-bg);color:var(--promo-fg);text-decoration:none;text-align:center}
.promo-eyebrow{font:500 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--promo-dim)}
.promo h3{margin:12px 0 0;font:400 30px/1.1 var(--serif);letter-spacing:-.015em}
.promo p{margin:10px auto 0;max-width:30ch;font:400 15px/1.5 var(--sans);color:var(--promo-dim)}
.promo-btn{display:inline-flex;align-items:center;margin-top:20px;height:46px;padding:0 22px;border-radius:23px;background:var(--promo-fg);color:#1f2622;font:600 14px/1 var(--sans)}
.promo:hover .promo-btn{opacity:.92}
.promo-note{margin-top:10px;font:400 12.5px/1 var(--sans);color:var(--promo-dim)}
.promo-phone{position:relative;width:208px;height:250px;margin:24px auto 0;overflow:hidden;border:7px solid #111411;border-bottom:0;border-radius:36px 36px 0 0;background:#f1f1ec;box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translateY(6px);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.promo:hover .promo-phone{transform:translateY(0)}
.promo-phone img{display:block;width:100%;height:auto}
.pp-island{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:30%;height:17px;border-radius:99px;background:#111411;z-index:1}

/* ---------- the answer, simply (2026-10-06) ---------- */
/* The answer, staged (2026-10-12): your pick, the distance, the answer, then the score. */
#answer{padding:18px 0 8px}
#answer .primary{margin-top:24px}
.an-card{background:var(--surface);border-radius:20px;padding:16px 18px}
.an-row{display:flex;align-items:center;gap:12px}
.an-lab{flex:none;width:78px;font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.an-val{min-width:0;font:400 21px/1.2 var(--serif);letter-spacing:-.01em}
.an-mark{flex:none;width:14px;height:14px;border-radius:7px;display:grid;place-items:center;background:var(--tierR)}
.an-mark.g{background:var(--tierG)} .an-mark.y{background:var(--tierY)} .an-mark.ans{background:var(--fg)}
.an-mark svg{display:block}
.an-link{display:flex;align-items:center;gap:12px;height:34px;padding-left:90px}
.an-line{flex:none;width:2px;height:100%;margin-left:6px;border-radius:1px;background:var(--line);transform-origin:top;transform:scaleY(0);transition:transform .3s ease-out}
.an-dist{font:500 13px/1 var(--sans);color:var(--fg2)}
.an-score{text-align:center;padding-top:20px}
.an-pts{font:400 46px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.an-sub{margin-top:7px;font:500 13px/1.3 var(--sans);color:var(--fg2)}
#answer .st{opacity:0;transform:translateY(8px);transition:opacity .28s ease-out,transform .28s cubic-bezier(.2,.8,.2,1)}
#answer .st.on{opacity:1;transform:none}
#answer .an-line.on{transform:scaleY(1)}