[hidden]{display:none!important}
:root{
  --parchment:#f6efe1;
  --parchment-2:#efe4cf;
  --ink:#2b2119;
  --ink-soft:#5c4d3d;
  --line:#d8c7a6;
  --gold:#b58a2e;
  --gold-2:#d8ac4a;
  --wine:#7a2e2e;
  --olive:#5c6b3a;
  --sky:#3d6480;
  --card:#fffdf7;
  --shadow:0 6px 22px rgba(60,42,20,.14);
  --radius:14px;
  /* chrome + reading colors — themes (themes.css) override these */
  --page-glow:#fbf6ea;
  --bar-1:#3a2b1a; --bar-2:#2c2013; --bar-ink:#f4e9d2; --bar-accent:#f0dca0;
  --btn-1:#8a5a2b; --btn-2:#6f4620; --btn-ink:#fdf6e6;
  --gold-ink:#3a2b12;
  --hl-1:#ffef9f; --hl-2:#b8ecc0; --hl-3:#f9c9de; --hl-4:#bcdcf5;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--page-glow), transparent),
    var(--parchment);
  min-height:100vh;
  line-height:1.55;
}
h1,h2,h3{font-weight:700;letter-spacing:.2px}
h2{margin:.2em 0 .6em}
a{color:var(--wine)}

/* Top bar */
/* The header is the top bar: thin, always there, and it says where you are
   rather than shouting the name of the game. It sits on the same light glass as
   the bottom bar, so everything on it is inked, not washed out. */
.topbar{box-shadow:0 1px 6px rgba(0,0,0,.10)}
.topbar .exit-btn{color:var(--ink-soft)}
.topbar .exit-btn:hover{background:var(--parchment-2);color:var(--ink)}
.topbar .exit-where{color:var(--ink);font-weight:700;letter-spacing:.01em}
.brand{font-size:.92rem;font-weight:600;cursor:pointer;display:inline-flex;gap:.15rem;align-items:baseline;flex:none}
.brand b{font-weight:800;color:var(--wine)}
.brand b i{font-style:normal;font-weight:600;font-size:.78em;opacity:.75}
/* study or game, said in two words */
.kind-chips{display:inline-flex;gap:.15rem;flex:none;margin-left:.2rem}
.kind-chip{background:transparent;border:1px solid rgba(216,172,74,.35);color:#e9d9b3;
  padding:.05rem .45rem;border-radius:999px;cursor:pointer;font:inherit;font-size:.76rem;line-height:1.5}
.kind-chip:hover{background:rgba(216,172,74,.18)}
.kind-chip.on{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);font-weight:700}
.topnav{display:flex;gap:.35rem;flex-wrap:wrap}
.navbtn{
  background:transparent;border:1px solid rgba(216,172,74,.4);color:#e9d9b3;
  padding:.35rem .7rem;border-radius:999px;cursor:pointer;font:inherit;font-size:.9rem;
}
.navbtn:hover{background:rgba(216,172,74,.18)}
.navbtn.active{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}

/* Layout */
#app{max-width:880px;margin:0 auto;padding:1.2rem 1rem 4rem}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Hero */
.hero{text-align:center;padding:2rem 1rem}
.hero h1{font-size:2.5rem;margin:.2em 0;color:var(--ink)}
.tagline{max-width:34rem;margin:0 auto 1.6rem;color:var(--ink-soft);font-size:1.08rem}
.home-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.home-actions .btn.big{display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:15rem}
.btn-sub{font-size:.78rem;font-weight:400;opacity:.85}
.home-actions-2{margin-top:.7rem}
/* choose a session type */
/* the start screen: the choice, and the two ways to take it */
.hero h1 .ink{font-size:.62em;font-weight:600;opacity:.7;letter-spacing:.01em}
/* the two ways sit at the foot of each card, so they line up across both */
.mode-go{display:flex;flex-direction:column;gap:.45rem;margin-top:auto;padding-top:.8rem}
.mode-go .btn{width:100%}
.home-extras{justify-content:center;flex-wrap:wrap;margin-top:1rem}
.mode-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem;margin:.6rem 0 0}
.mode-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow);display:flex;flex-direction:column}
.mode-card h3{margin:0 0 .3rem;font-size:1.3rem}
.mode-lead{margin:0 0 .6rem;color:var(--ink-soft)}
.mode-points{margin:0 0 .8rem;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.mode-points li{line-height:1.45}
.pts-tag{background:var(--gold);color:var(--gold-ink);border-radius:999px;padding:.02rem .45rem;
  font-size:.78rem;font-weight:700;margin-left:.4rem;white-space:nowrap}
.mode-card .btn{margin-top:auto}
.loadstate{margin-top:1.4rem;color:var(--ink-soft);font-style:italic;min-height:1.2em}
.loadstate.err{color:var(--wine)}

/* Buttons */
.btn{
  background:linear-gradient(180deg,var(--btn-1),var(--btn-2));color:var(--btn-ink);border:none;
  padding:.6rem 1.1rem;border-radius:10px;cursor:pointer;font:inherit;font-size:1rem;
  box-shadow:var(--shadow);transition:transform .06s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:var(--gold-ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--parchment-2)}
.btn.big{font-size:1.15rem;padding:.8rem 1.5rem}
.btn.small{font-size:.86rem;padding:.4rem .75rem}
.btn:disabled{opacity:.5;cursor:not-allowed}

.row-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.row-actions.center{justify-content:center}

/* Fields */
.field{display:block;margin:1rem 0}
.field>span{display:block;font-size:.9rem;color:var(--ink-soft);margin-bottom:.35rem;font-weight:600}
/* every text-ish input gets the same parchment field — password and email were
   missing here, so they fell back to the browser's own box */
input[type=text],input[type=search],input[type=password],input[type=email],
input[type=tel],input[type=number],input[type=url],select,textarea{
  width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:9px;
  background:var(--card);font:inherit;font-size:1rem;color:var(--ink);
  line-height:1.35;-webkit-appearance:none;appearance:none;
}
input[type=password]{letter-spacing:.12em}
input::placeholder{color:#a8977f}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold-2);outline-offset:1px;border-color:var(--gold)}
/* Chrome paints autofilled fields pale blue — keep them on parchment */
input:-webkit-autofill,input:-webkit-autofill:focus,input:autofill{
  -webkit-text-fill-color:var(--ink);
  box-shadow:0 0 0 100px var(--card) inset;
  background-color:var(--card)!important;
  background-image:none;
}
textarea{resize:vertical;min-height:2.4rem}

.player-inputs{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.5rem}
.player-row{display:flex;gap:.5rem;align-items:center}
.player-row input{flex:1}
.player-row .rm{background:none;border:none;color:var(--wine);font-size:1.2rem;cursor:pointer;padding:.2rem .4rem}

/* Panels */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;margin:1rem 0;box-shadow:var(--shadow)}
.hint{color:var(--ink-soft);font-size:.92rem}
.muted{color:#9a8b76}

/* Hub */
.hub-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.hub-tools{display:flex;gap:.4rem;align-items:center}
.online-acct{display:inline-flex;gap:.4rem;align-items:center}
.acct-who{font-size:.85rem;color:var(--ink-soft);font-weight:600}

/* Scoreboard */
.scoreboard{display:flex;gap:.6rem;flex-wrap:wrap;margin:.5rem 0 0}
.score-chip{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:.5rem .9rem;min-width:110px;box-shadow:var(--shadow);position:relative;flex:1 1 auto
}
.score-chip .nm{font-weight:700;display:flex;align-items:center;gap:.35rem}
.score-chip .pts{font-size:1.9rem;font-weight:700;color:var(--gold);line-height:1}
/* a study keeps no score — the chips are just "who's here", so they stay small */
.scoreboard.names-only{gap:.4rem}
.scoreboard.names-only .score-chip{padding:.3rem .7rem;min-width:0;flex:0 0 auto;font-size:.92rem}
.score-chip.leader{border-color:var(--gold);box-shadow:0 0 0 2px rgba(181,138,46,.25),var(--shadow)}
/* who is who: the host wears 👑, whoever is guiding wears 🎚️, and the line
   underneath says it in words for anyone who does not read emoji */
.seat-name{display:inline-flex;align-items:center;gap:.2rem}
.seat-name.guiding{color:var(--olive)}
.seat-mark{font-size:.85em}
.seat-legend{flex-basis:100%;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  font-size:.82rem;color:var(--ink-soft);margin-top:.15rem}
.score-chip.out{opacity:.5;filter:grayscale(.5)}
.score-chip.out .pts{color:var(--ink-soft)}
.out-tag{font-size:.78rem;color:var(--ink-soft);font-weight:400}
.chip-dot{width:.7rem;height:.7rem;border-radius:50%;display:inline-block;flex:none}
.crown{filter:drop-shadow(0 1px 1px rgba(0,0,0,.2))}

/* Player manager */
.player-manager{margin-top:.8rem}
.roster-list{display:flex;flex-direction:column;gap:.4rem;margin:.5rem 0 .8rem}
.roster-row{display:flex;align-items:center;gap:.6rem;background:var(--parchment);border:1px solid var(--line);
  border-radius:10px;padding:.45rem .7rem}
.roster-row.out{opacity:.6}
.roster-name{font-weight:700;flex:1}
.roster-score{color:var(--ink-soft);font-size:.88rem}
.dropin-row{display:flex;gap:.5rem}
.dropin-row input{flex:1}

/* Bible progress */
.bible-progress{margin:.9rem 0 0}
.bp-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem;color:var(--ink-soft);margin-bottom:.3rem}
.bp-head span:first-child{font-weight:600}
.bp-track{height:12px;background:var(--parchment-2);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.bp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:999px;transition:width .6s ease}

/* Current chapter */
.cc-ref{font-size:1.5rem;font-weight:700;margin-bottom:.2rem}
.cc-why{font-size:.9rem;color:var(--gold);font-style:italic;margin-bottom:.5rem}

/* Next-chapter method vote */
.next-method{margin-top:1rem}
.next-method h3{margin:1rem 0 .3rem}
.method-list{display:flex;flex-direction:column;gap:.4rem;margin:.5rem 0}
.method-row{display:flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:.4rem .6rem;box-shadow:var(--shadow)}
.method-row.leader{border-color:var(--gold);background:#fbf4e2}
.method-vote{background:var(--olive);color:#fff;border:none;border-radius:7px;padding:.3rem .6rem;font:inherit;font-size:.85rem;cursor:pointer}
.method-unvote{background:none;border:1px solid var(--line);border-radius:7px;width:1.7rem;height:1.7rem;cursor:pointer;font-size:1rem;line-height:1}
.method-count{min-width:1.4rem;text-align:center;font-weight:700;color:var(--gold)}
.method-label{flex:1}
.method-leader{margin-top:.4rem;font-weight:600;color:var(--olive)}
.chooserHint,.hint.chooser{font-style:italic}

/* History */
.history-list{margin:.4rem 0 0;padding-left:1.2rem}
.history-list li{margin:.35rem 0}
.h-ref{font-weight:700}
.h-detail{color:var(--ink-soft);font-size:.92rem}

/* Reader */
.reader-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  position:sticky;top:52px;background:var(--parchment);padding:.4rem 0;z-index:5;border-bottom:1px solid var(--line)}
.reader-tools{display:flex;gap:.4rem}
/* Reading options bar */
/* sticky, so it needs its own opaque backing — otherwise the chapter text
   scrolls up underneath the buttons and reads through the gaps */
.reading-options{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.6rem 0;
  position:sticky;top:96px;z-index:4;
  background:var(--parchment);border:1px solid var(--line);border-radius:10px;
  padding:.35rem .5rem;box-shadow:var(--shadow)}
.ro-group{display:flex;gap:.2rem;background:var(--card);border:1px solid var(--line);border-radius:9px;padding:.15rem;box-shadow:var(--shadow)}
.ro-btn{background:transparent;border:none;border-radius:7px;padding:.35rem .6rem;font:inherit;font-size:.85rem;cursor:pointer;color:var(--ink)}
.ro-btn:hover{background:var(--parchment-2)}
.ro-btn.sel{background:var(--gold);color:var(--gold-ink);font-weight:600}
.ro-toggle{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.ro-version{display:inline-flex}
.ro-version select,.ro-version-sel{padding:.3rem .5rem;border:1px solid var(--line);border-radius:8px;background:var(--card);font:inherit;font-size:.85rem;cursor:pointer}
.ro-version-sel{margin-left:.3rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.cmp-label{font-size:1rem;color:var(--ink-soft);padding:0 .2rem}
/* side-by-side compare */
.scripture.compare{line-height:1.55}
.cmp-head{display:grid;grid-template-columns:1.6rem 1fr 1fr;gap:.8rem;position:sticky;top:0;background:var(--card);
  padding:.2rem 0 .4rem;border-bottom:2px solid var(--line);margin-bottom:.3rem;z-index:2}
.cmp-col-h{font-weight:700;color:var(--wine);font-size:.85em}
.cmp-row{display:grid;grid-template-columns:1.6rem 1fr 1fr;gap:.8rem;padding:.35rem 0;border-bottom:1px solid #eadfc6;cursor:pointer}
.cmp-row .vn{vertical-align:top}
.cmp-col{min-width:0}
.scripture.compare.no-nums .cmp-head,.scripture.compare.no-nums .cmp-row{grid-template-columns:1fr 1fr}
@media (max-width:560px){
  .cmp-head,.cmp-row{grid-template-columns:1.4rem 1fr 1fr;gap:.5rem;font-size:.95em}
}

.scripture{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;margin:1rem 0;box-shadow:var(--shadow);
  font-size:1.14rem;line-height:1.85;
}
.scripture.sans{font-family:"Segoe UI",Verdana,system-ui,sans-serif;line-height:2}
.scripture.size-xs{font-size:.98rem}
.scripture.size-s{font-size:1.06rem}
.scripture.size-m{font-size:1.18rem}
.scripture.size-l{font-size:1.4rem;line-height:1.95}
.scripture.size-xl{font-size:1.7rem;line-height:2}
/* the verse number needs air on its right, or it reads as part of the word */
.vn{margin-right:.25em}
.verse .vn{
  font-size:.72em;color:var(--gold);font-weight:700;vertical-align:super;margin-right:.25em;
  font-family:Georgia,serif;
}
.paste-line .vn,.ref-verse .vn,.cmp-row .vn{
  font-size:.78em;color:var(--gold);font-weight:700;margin-right:.3em;
}
/* On a touch screen, holding a verse is how you mark it — so the browser must
   not start selecting words and popping its own Copy/Look-up bar over the top.
   Pointer devices keep selection: on a desktop, dragging over the text to copy
   it is still the obvious thing, and holding is a right-click instead. */
@media (hover:none){
  .scripture,.scripture .verse,.scripture .w,.ref-body,.notes-body{
    -webkit-user-select:none;-moz-user-select:none;user-select:none;
    -webkit-touch-callout:none;
  }
}
.scripture .verse{touch-action:manipulation}

/* one word at a time: every word can carry a mark of its own. Double-tap sets
   it — the highlight sits behind the word, so the text stays the text.
   The verse colors only paint on a whole verse, so a marked word needs its
   own rules or nothing shows. */
.verse .w{border-radius:3px}
.verse .w.w-mine,.verse .w.w-shared{padding:.02em .1em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.verse .w.hl-1{background:var(--hl-1);box-shadow:0 2px 0 var(--hl-1)}
.verse .w.hl-2{background:var(--hl-2);box-shadow:0 2px 0 var(--hl-2)}
.verse .w.hl-3{background:var(--hl-3);box-shadow:0 2px 0 var(--hl-3)}
.verse .w.hl-4{background:var(--hl-4);box-shadow:0 2px 0 var(--hl-4)}
@media (hover:hover){ .verse .w:hover{background:rgba(181,138,46,.14)} }
/* a Strong's number belongs to the word before it, but not to the one after */
.stg-num{margin-right:.15em}
.scripture.no-nums .vn{display:none}
.verse:target{background:#fff3cf}
/* line-by-line: each verse on its own line */
.scripture.layout-lines .verse{display:block;margin:.15rem 0;padding-left:1.6rem;text-indent:-1.6rem}
.scripture.layout-lines .verse .vn{vertical-align:baseline;font-size:.82em}
/* focus: one big verse + nav */
.scripture.layout-verse{text-align:center}
/* Focus layout: the group's verse, with the one before and after kept faint
   so nobody loses the thread of the passage. */
.scripture.layout-verse .verse{margin:.5rem 0}
.scripture.layout-verse .verse.ctx{opacity:.5;font-size:.72em;line-height:1.5;color:var(--ink-soft)}
.scripture.layout-verse .verse.ctx:hover{opacity:.75}
.verse.focus{display:block;font-size:1.35em;line-height:1.7;padding:1rem .5rem 1.5rem}
.verse.focus .vn{font-size:.55em}
/* Each chapter step sits outside its verse button — back on the left of ◀ Prev,
   on to the right of Next ▶ — and both fall to a row of their own on a phone,
   where there is no width to spare. A bigger move, so they carry the gold edge. */
.chapter-step{border-color:var(--gold);font-weight:600}
.nav-rows{display:grid;align-items:center;justify-content:center;gap:.5rem .9rem;
  grid-template-columns:auto auto auto;grid-template-areas:"back verses on";
  border-top:1px solid var(--line);padding-top:1rem}
.nav-rows>.step-back{grid-area:back}
.nav-rows>.verse-nav{grid-area:verses}
.nav-rows>.step-on{grid-area:on}
.verse-nav{display:flex;align-items:center;justify-content:center;gap:1rem}
@media (max-width:600px){
  .nav-rows{grid-template-columns:1fr 1fr;grid-template-areas:"verses verses" "back on"}
  .nav-rows>.step-back,.nav-rows>.step-on{justify-self:stretch}
}
.vn-count{color:var(--ink-soft);font-size:.9rem;min-width:8rem}

/* Chapter search */
.chsearch-list{display:flex;flex-direction:column;gap:.6rem}
.chsearch-item{display:flex;gap:.8rem;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;box-shadow:var(--shadow)}
.chs-main{flex:1;min-width:0}
.chs-ref{font-weight:700;color:var(--wine);margin-bottom:.2rem}
.chs-snip{font-size:.92rem;color:var(--ink-soft);line-height:1.5}
.chs-vn{color:var(--gold);font-weight:700;font-size:.85em;margin-right:.3rem}
.chs-snip mark{background:#fff0b8;color:inherit;padding:0 .1em;border-radius:3px}

/* Log view */
.log-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.log-tab{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink)}
.log-tab.sel{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);font-weight:600}
.log-list{line-height:1.9}
.log-round{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem 1rem;margin:.6rem 0;box-shadow:var(--shadow)}
.log-round-head{font-weight:700;margin-bottom:.35rem;display:flex;align-items:center;gap:.4rem}
.log-ans{margin:0;padding-left:1.2rem;line-height:1.75}
.log-ans li{margin:.2rem 0}
.log-player{font-weight:700}
.log-type.person{color:var(--sky)}.log-type.location{color:var(--olive)}.log-type.application{color:var(--wine)}
.log-pts{color:var(--gold);font-weight:700;font-size:.9em}

/* Present-this-round bar */
.present-bar{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin:.3rem 0 .9rem;
  padding:.5rem .7rem;background:var(--parchment-2);border:1px solid var(--line);border-radius:10px}
.present-label{font-size:.85rem;color:var(--ink-soft);font-weight:700;margin-right:.2rem}
.present-chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.3rem .8rem;
  font:inherit;font-size:.9rem;cursor:pointer;opacity:.55}
.present-chip.on{opacity:1;border-color:var(--olive);background:#eaf0dd;font-weight:600}

/* Score form */
.score-form{display:flex;flex-direction:column;gap:.8rem;margin-top:.6rem}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;box-shadow:var(--shadow)}
.pcard .phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}
.pcard .pname{font-weight:700;font-size:1.05rem}
.type-choices{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.type-pill{
  border:1px solid var(--line);background:var(--parchment);border-radius:999px;
  padding:.35rem .8rem;cursor:pointer;font:inherit;font-size:.9rem;user-select:none;display:flex;gap:.3rem;align-items:center
}
.type-pill.sel{color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 2px currentColor}
.type-pill[data-t=person].sel{background:#cfe0ec;border-color:var(--sky);color:#274a63}
.type-pill[data-t=location].sel{background:#dde7c8;border-color:var(--olive);color:#3f4d26}
.type-pill[data-t=application].sel{background:#eccdcd;border-color:var(--wine);color:#5e2020}
.type-pts{font-size:.75em;opacity:.85}
.pcard .note{margin-top:.2rem}
.bonus-row{display:flex;gap:.5rem;align-items:center;margin-top:.5rem;flex-wrap:wrap}
.bonus-row label{font-size:.85rem;color:var(--ink-soft);display:flex;gap:.35rem;align-items:center}
.bonus-row input[type=number]{width:4.5rem;padding:.35rem}
.bonus-row input[type=text]{flex:1;min-width:8rem}
.next-chooser{max-width:22rem}

/* Reference tag in headings */
.ref-tag{font-size:1rem;color:var(--gold);font-weight:700}

/* Type badge (phase 2) */
.type-badge{display:inline-block;font-size:.78rem;padding:.15rem .6rem;border-radius:999px;color:#fff;font-weight:600}
.type-badge.person{background:var(--sky)}.type-badge.location{background:var(--olive)}.type-badge.application{background:var(--wine)}

/* Duplicate answer warning */
.note.dup{border-color:var(--wine);background:#fbeceb;outline:2px solid var(--wine)}
.dup-warn{color:var(--wine);font-size:.82rem;margin-top:.3rem;font-weight:600}

/* Resolve panel */
.resolve-panel{margin-top:.5rem}
.resolve-panel h3{margin:1rem 0 .3rem}
.match-row{display:flex;gap:.55rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:.6rem .8rem;margin:.4rem 0;cursor:pointer;box-shadow:var(--shadow)}
.match-row.auto{border-color:var(--gold);background:#fbf4e2}
.match-row input{margin-top:.25rem;width:1.1rem;height:1.1rem;flex:none}
.match-tag{color:var(--ink-soft);font-size:.82rem;font-style:italic}

.vote-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem;margin:.5rem 0;box-shadow:var(--shadow)}
.vote-q{margin-bottom:.55rem}
.vote-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.5rem}
.vote-seg{display:flex;flex-direction:column;gap:.25rem;background:var(--parchment);border:1px solid var(--line);border-radius:10px;padding:.4rem .5rem}
.vote-name{font-size:.82rem;font-weight:700;color:var(--ink-soft);text-align:center}
.vbtn{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:.3rem .5rem;font:inherit;font-size:.82rem;cursor:pointer}
.vbtn.yes.sel{background:var(--olive);color:#fff;border-color:transparent}
.vbtn.no.sel{background:var(--wine);color:#fff;border-color:transparent}
.vseg-btns{display:flex;gap:.25rem}
.help-seg{display:flex;flex-direction:column;gap:.3rem;background:var(--parchment);border:1px solid var(--line);border-radius:10px;padding:.45rem .55rem;align-items:stretch}
.hbtn{border:1px solid var(--line);background:var(--card);border-radius:7px;padding:.3rem .5rem;font:inherit;font-size:.8rem;cursor:pointer}
.hbtn.sel{background:var(--gold);color:var(--gold-ink);border-color:transparent;font-weight:600}
.hbtn:disabled{opacity:.4;cursor:not-allowed}
.chbtn{border:1px solid var(--wine);background:var(--card);color:var(--wine);border-radius:7px;padding:.3rem .5rem;font:inherit;font-size:.8rem;cursor:pointer}
.chbtn.sel{background:var(--wine);color:#fff;border-color:transparent;font-weight:600}
.research-area{margin-top:.6rem;border-top:1px dashed var(--line);padding-top:.6rem;display:flex;flex-direction:column;gap:.5rem}
.research-banner{background:#f3e7c9;border:1px solid var(--gold);border-radius:10px;padding:.55rem .75rem;font-size:.92rem}
.challenger-row{margin:.35rem 0;display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.chal-label{font-size:.85rem;color:var(--ink-soft)}
.chal-sel{width:auto;padding:.35rem .5rem}
.vote-verdict{font-weight:600;font-size:.92rem;padding:.35rem 0}
.vote-verdict.good{color:var(--olive)}
.vote-verdict.bad{color:var(--wine)}

/* Reveal */
.reveal-list{display:flex;flex-direction:column;gap:.7rem;margin:1rem 0}
.reveal-card{
  background:var(--card);border:1px solid var(--line);border-left:6px solid var(--gold);
  border-radius:12px;padding:.9rem 1rem;box-shadow:var(--shadow);
  opacity:0;transform:translateX(-10px);animation:slidein .4s forwards;
}
@keyframes slidein{to{opacity:1;transform:none}}
.reveal-card .rc-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.reveal-card .rc-name{font-weight:700;font-size:1.1rem}
.reveal-card .rc-pts{font-weight:700;color:var(--gold);font-size:1.2rem;white-space:nowrap}
.reveal-card .rc-type{display:inline-block;font-size:.78rem;padding:.1rem .5rem;border-radius:999px;color:#fff;margin-top:.2rem}
.rc-type.person{background:var(--sky)}.rc-type.location{background:var(--olive)}.rc-type.application{background:var(--wine)}
.reveal-card .rc-note{margin-top:.4rem;color:var(--ink-soft)}
.reveal-card .rc-bonus{margin-top:.3rem;font-size:.88rem;color:var(--gold);font-weight:600}
.reveal-card .rc-bonus.good{color:var(--olive)}
.reveal-card .rc-bonus.bad{color:var(--wine)}
.reveal-card.zero{border-left-color:#b0a48d;opacity:.85}
.reveal-card.zero .rc-pts{color:var(--ink-soft)}

/* Atlas */
.atlas-search{max-width:26rem;margin-bottom:1rem}
.atlas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.map-card{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:var(--shadow);cursor:pointer;display:flex;flex-direction:column}
.map-card img{width:100%;height:150px;object-fit:cover;background:#e9dec4;display:block}
.map-card .mc-body{padding:.55rem .7rem}
.map-card .mc-title{font-size:.88rem;font-weight:600;line-height:1.25}
.map-card .mc-lic{font-size:.72rem;color:#9a8b76;margin-top:.2rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(20,14,6,.9);display:flex;align-items:center;justify-content:center;
  flex-direction:column;z-index:50;padding:1rem}
.lightbox img{max-width:96vw;max-height:82vh;object-fit:contain;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lightbox .lb-cap{color:#eaddc0;margin-top:.7rem;text-align:center;max-width:60rem;font-size:.9rem}
.lightbox .lb-cap a{color:var(--gold-2)}
.lightbox .lb-close{position:absolute;top:1rem;right:1.3rem;color:#fff;font-size:2rem;cursor:pointer;background:none;border:none}

/* Rules */
.rules-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.rules{line-height:1.9}
.rules li{margin:.3rem 0}

/* Saved games modal list */
.savelist{display:flex;flex-direction:column;gap:.5rem;margin-top:.6rem}
.save-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem}
.save-row .sr-meta{font-size:.85rem;color:var(--ink-soft)}
.save-row .sr-actions{display:flex;gap:.35rem}

/* Bible map + journey */
.journey-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.1rem;margin:1rem 0;box-shadow:var(--shadow)}
.journey-wrap{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#dfeaf0}
.biblemap{display:block;width:100%;height:auto}
.biblemap .sea-label{fill:#3d6480;font-size:15px;font-style:italic;font-family:Georgia,serif;opacity:.7}
.biblemap .marker-label{font-size:13px;font-family:Georgia,serif;fill:#2b2119;font-weight:600;paint-order:stroke}
.biblemap .marker-label.halo{stroke:#fffdf7;stroke-width:3.2px;fill:none}
.biblemap .marker{cursor:default}
.journey-legend{margin-top:.7rem;display:flex;flex-direction:column;gap:.3rem}
.leg-item{display:flex;align-items:baseline;gap:.45rem;font-size:.92rem;flex-wrap:wrap}
.leg-dot{width:.8rem;height:.8rem;border-radius:50%;display:inline-block;flex:none;align-self:center}
.leg-name{font-weight:700}
.leg-path{color:var(--ink-soft)}

/* Verse layout + highlighting */
.scripture.layout-flow .verse{display:inline}
.verse{cursor:pointer;border-radius:5px;transition:background .1s}
.scripture.readonly .verse{cursor:default}
.verse.hl-1{background:var(--hl-1)}.verse.hl-2{background:var(--hl-2)}
.verse.hl-3{background:var(--hl-3)}.verse.hl-4{background:var(--hl-4)}
.hl-bar{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
.theme-bar{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
/* compare with a second translation */
.cmp-bar{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
.cmp-sel{width:auto;min-width:9rem;padding:.35rem .5rem;font-size:.9rem}
.cmp-modes{display:inline-flex;gap:.2rem;background:var(--card);border:1px solid var(--line);border-radius:9px;
  padding:.15rem;flex:0 0 auto;white-space:nowrap}
.cmp-modes .ro-btn{white-space:nowrap}
/* the reader's options bar is a flex row — keep the compare controls inline */
.ro-version{display:inline-flex;align-items:center;gap:.35rem;flex:0 0 auto}
.ro-version select{width:auto;min-width:6.5rem}
.cmp-modes.off{display:none}
.cmp-tag{display:inline-block;font-size:.62em;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--parchment-2);border-radius:999px;padding:.05rem .4rem;margin-right:.35rem;
  vertical-align:.12em}
/* stacked: the second reading sits under the first */
.cmp-alt{display:block;margin:.15rem 0 .35rem;color:var(--ink-soft);font-size:.88em;line-height:1.5}
.scripture.cmp-inline .verse{display:block;margin:.5rem 0;padding-bottom:.35rem;border-bottom:1px dashed var(--line)}
/* side by side: two columns per verse, stacking on a narrow screen */
.scripture.cmp-inline .cmp-main{display:block;min-width:0}
.scripture.cmp-inline.cmp-side .verse{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start}
.scripture.cmp-inline.cmp-side .verse .vn{grid-column:1 / -1;margin-bottom:-.2rem}
.scripture.cmp-inline.cmp-side .cmp-alt{margin:0;border-left:1px solid var(--line);padding-left:.9rem}
@media (max-width:640px){ .scripture.cmp-inline.cmp-side .verse{grid-template-columns:1fr}
  .scripture.cmp-inline.cmp-side .cmp-alt{border-left:0;padding-left:0} }
/* reader's stacked compare rows */
.scripture.compare.stacked .cmp-row{grid-template-columns:1.6rem 1fr}
.cmp-stack{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.cmp-line{line-height:1.5}
.cmp-line.alt{color:var(--ink-soft)}
.theme-sel{width:auto;min-width:11rem;padding:.35rem .5rem;font-size:.9rem}
.hl-label{font-size:.85rem;color:var(--ink-soft);font-weight:600;margin-right:.2rem}
.hl-tool{width:2rem;height:2rem;border:1px solid var(--line);background:var(--card);border-radius:8px;
  cursor:pointer;font-size:1.05rem;line-height:1;display:flex;align-items:center;justify-content:center;
  position:relative;padding:0}
/* the color tools ARE their color — no emoji standing in for them */
.hl-tool.tool-y{background:var(--hl-1)}
.hl-tool.tool-g{background:var(--hl-2)}
.hl-tool.tool-p{background:var(--hl-3)}
.hl-tool.tool-b{background:var(--hl-4)}
/* read-only: a bar through an empty swatch */
.hl-tool.tool-none::after{content:"";position:absolute;width:1.15rem;height:2px;background:var(--ink-soft);transform:rotate(-45deg);border-radius:2px}
/* select: a small caret pointing at a line of text */
.hl-tool.tool-point::after{content:"";position:absolute;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--ink)}
/* erase: a soft chequer, the usual "remove the color" sign */
.hl-tool.tool-erase{background:
  linear-gradient(45deg,var(--parchment-2) 25%,transparent 25%,transparent 75%,var(--parchment-2) 75%) 0 0/10px 10px,
  linear-gradient(45deg,var(--parchment-2) 25%,var(--card) 25%,var(--card) 75%,var(--parchment-2) 75%) 5px 5px/10px 10px}
.hl-tool.sel{border-color:var(--ink);box-shadow:0 0 0 2px var(--gold-2)}

/* Chapter peek (phase 2) + maps row */
.peek-row{margin:.4rem 0}
.chapter-peek{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.4rem .8rem;margin:.5rem 0;box-shadow:var(--shadow)}
.chapter-peek>summary{cursor:pointer;font-weight:700;padding:.3rem 0}
.peek-hint{font-weight:400;font-size:.82rem;color:var(--ink-soft)}
.chapter-peek .scripture{max-height:50vh;overflow:auto;margin:.5rem 0 .3rem}

/* Maps popup */
.maps-pop{align-items:flex-start;overflow:auto;padding:2rem 1rem}
.maps-pop-panel{background:var(--card);border-radius:14px;padding:1.2rem 1.4rem;max-width:52rem;width:100%;margin:auto}
.maps-pop-panel h3{margin:.2rem 0 .5rem}
.maps-pop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem;margin-top:.5rem}
.mp-sub{font-weight:700;margin-top:.9rem}

/* Account + auth */
.account-bar{display:flex;gap:.6rem;align-items:center;justify-content:center;margin-top:1.3rem;flex-wrap:wrap}
.acct-name{font-weight:700}
/* optional account row on the New Study / New Game screen */
.setup-acct{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;background:var(--parchment);border:1px solid var(--line);border-radius:12px;padding:.7rem .85rem;margin-bottom:1rem}
.setup-acct .hint{flex-basis:100%;margin:.1rem 0 0}
.auth-panel{max-width:22rem;margin:1rem auto 0;text-align:left}
/* auth modal overlay (works over any screen, incl. a live game) */
/* the panel can be taller than a phone screen (the reset step adds two fields),
   so the overlay scrolls and the buttons are always reachable */
.auth-overlay{position:fixed;inset:0;z-index:55;background:rgba(20,14,6,.55);display:flex;
  align-items:flex-start;justify-content:center;padding:1rem;overflow:auto;-webkit-overflow-scrolling:touch}
.auth-overlay .auth-modal{margin:auto}
.auth-overlay[hidden]{display:none}
.auth-modal{background:var(--card);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:1.2rem 1.3rem;
  max-width:24rem;width:100%;position:relative}
.modal-x{position:absolute;top:.5rem;right:.55rem;width:2rem;height:2rem;border-radius:8px;
  border:1px solid var(--line);background:var(--parchment);color:var(--ink-soft);
  font:inherit;font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.modal-x:hover{background:var(--parchment-2);color:var(--ink)}
.auth-modal .auth-body{padding-top:.6rem}
.auth-body{text-align:left}
.gender-row{display:flex;gap:.4rem;margin:.4rem 0}
.gender-btn{border:1px solid var(--line);background:var(--parchment);border-radius:999px;padding:.35rem .8rem;font:inherit;font-size:.9rem;cursor:pointer}
.gender-btn.sel{background:var(--sky);color:#fff;border-color:transparent;font-weight:700}
.chat-gate{padding:.5rem .7rem;border-top:1px solid var(--line);text-align:center}
.auth-tabs{display:flex;gap:.4rem;margin-bottom:.6rem}
.auth-tab{flex:1;background:var(--parchment);border:1px solid var(--line);border-radius:9px;padding:.45rem;font:inherit;cursor:pointer}
.auth-tab.sel{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);font-weight:700}
.auth-error{color:var(--wine);font-size:.88rem;font-weight:600;margin:.2rem 0}
.auth-alt{margin:.5rem 0 0;text-align:center}
/* book picker (custom scope) */
.bookpick-pop{position:fixed;inset:0;background:rgba(20,14,6,.55);display:flex;align-items:flex-start;justify-content:center;
  padding:2rem 1rem;overflow:auto;z-index:60}
.bookpick-card{background:var(--card);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.4);padding:1.1rem 1.2rem;
  max-width:44rem;width:100%}
.bookpick-card h3{margin:0 0 .2rem}
.bookpick-card h4{margin:.9rem 0 .35rem;color:var(--wine);font-size:.95rem;letter-spacing:.02em}
.bookpick-quick{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 .2rem}
.bookpick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.35rem}
.book-chip{display:flex;align-items:center;justify-content:space-between;gap:.4rem;text-align:left;
  background:var(--parchment);border:1px solid var(--line);border-radius:9px;padding:.4rem .55rem;
  font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink)}
.book-chip:hover{border-color:var(--gold)}
.book-chip.sel{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:700}
.book-chip-n{font-size:.75rem;color:var(--ink-soft);font-weight:600}
.book-chip.sel .book-chip-n{color:#5a4413}
.bookpick-count{margin:.9rem 0 .2rem;font-weight:600;color:var(--wine)}
.bookpick-actions{position:sticky;bottom:0;background:var(--card);padding-top:.5rem}
@media (max-width:560px){ .bookpick-grid{grid-template-columns:repeat(auto-fill,minmax(7rem,1fr))} }
.linkish{background:none;border:0;padding:0;font:inherit;font-size:.9rem;color:var(--sky);text-decoration:underline;cursor:pointer}
.linkish:hover{color:var(--wine)}
.verified-badge{background:var(--olive);color:#fff;border-radius:999px;padding:.1rem .5rem;font-size:.78rem;font-weight:700}

/* voice call bar */
.voice-bar{max-width:880px;margin:.8rem auto 0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  background:var(--parchment-2);border:1px solid var(--line);border-radius:12px;padding:.5rem .9rem}
.voice-label{font-weight:700}
.voice-names{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.9rem}
.voice-me{font-weight:700}
.voice-peer{color:var(--ink-soft)}
.voice-peer.on{color:var(--olive);font-weight:600}
/* a mic the host turned off, and the host's tap-a-name-to-mute buttons */
.voice-peer.shut{color:var(--ink-soft);opacity:.65;text-decoration:line-through}
.voice-shut{font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.btn-bare{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.btn-bare:hover{text-decoration:underline}
.voice-peer.btn-bare.shut:hover{text-decoration:line-through underline}

/* online chat */
.online-chat{max-width:880px;margin:1rem auto 0;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .9rem;font-weight:700;border-bottom:1px solid var(--line);background:var(--parchment-2)}
.chat-head-tools{display:flex;gap:.25rem}
.chat-head-btn{border:1px solid var(--line);background:var(--card);color:inherit;border-radius:7px;cursor:pointer;
  font-size:.95rem;line-height:1;padding:.2rem .45rem}
.chat-head-btn:hover{background:var(--parchment)}

/* ---- the way out ----
   Two thin bars, fixed to the top and bottom of the window, that survive every
   screen and every mode (big scripture included). Nobody should ever be stuck
   in a room with no door. */
:root{--exitbar:2.1rem}
.exit-bar{position:fixed;left:0;right:0;z-index:90;display:flex;align-items:center;gap:.15rem;
  height:var(--exitbar);padding:0 .35rem;font-size:.82rem;
  background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);color:var(--ink-soft)}
.exit-top{top:0;height:var(--exitbar)}
.exit-bottom{bottom:0;top:auto;border-bottom:0;border-top:1px solid var(--line);
  justify-content:center;gap:.35rem;padding-bottom:env(safe-area-inset-bottom)}
.exit-btn{display:inline-flex;align-items:center;gap:.25rem;border:0;background:none;color:inherit;
  font:inherit;cursor:pointer;padding:.15rem .45rem;border-radius:7px;white-space:nowrap}
.exit-btn:hover{background:var(--parchment-2);color:var(--ink)}
.exit-btn.exit-leave{margin-left:auto;color:var(--wine);font-weight:600}
/* the person in the corner: who you are, and the way to everything about you */
.exit-btn.exit-me{margin-left:auto;font-weight:600;color:var(--ink);max-width:9rem}
.exit-btn.exit-me span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exit-bottom .exit-btn.exit-leave{margin-left:0}
/* the room code: a button, because tapping it is how you share the room */
.exit-where{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
  border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:.1rem .4rem;border-radius:7px}
.exit-where:hover{background:var(--parchment-2)}
.exit-where[hidden]{display:none}
/* room for them, at both ends */
body{padding-top:var(--exitbar)}
body{padding-bottom:calc(var(--exitbar) + 1rem)}
/* the tightest phones drop the words and keep the icons */
/* the tightest phones keep the icons — and the word on the one that matters */
/* Once you are in a room the Study/Game chips are just telling you what you
   already know — on a phone that space belongs to the room code and the way
   out. (On a big screen they stay: there is room, and they start a new one.) */
@media (max-width:600px){ html.in-room .kind-chips{display:none} }
@media (max-width:430px){
  .exit-btn span{display:none}
  .exit-btn.exit-leave span,.exit-btn.exit-me span{display:inline}
  .exit-where{font-size:.78rem}
}
/* smaller still: the room code must not be the thing that gets clipped, so the
   header's Leave keeps its door and drops its word (the bottom bar still spells
   it out) */
@media (max-width:390px){
  .exit-btn.exit-me{max-width:5.5rem}
  .exit-where{font-size:.8rem}
}

/* Docked: pinned to the foot of the window, Scripture scrolling above it.
   The grip along the top edge drags the split. */
#onlineChat.chat-docked{position:fixed;left:0;right:0;bottom:var(--exitbar);top:auto;z-index:60;max-width:none;margin:0;
  display:flex;flex-direction:column;height:var(--dockh,40vh);min-height:7rem;max-height:85vh;
  border-radius:12px 12px 0 0;border-bottom:0;box-shadow:0 -6px 22px rgba(0,0,0,.18)}
#onlineChat.chat-docked .chat-messages{flex:1 1 auto;min-height:0;max-height:none}
#onlineChat.chat-docked .chat-head,#onlineChat.chat-docked .ai-wrap,
#onlineChat.chat-docked .chat-compose,#onlineChat.chat-docked .chat-gate{flex:none}
#onlineChat.chat-docked .chat-head,#onlineChat.chat-docked .chat-messages,
#onlineChat.chat-docked .ai-wrap,#onlineChat.chat-docked .chat-compose,
#onlineChat.chat-docked .chat-gate{max-width:880px;margin-inline:auto;width:100%}
.chat-grip{flex:none;height:12px;cursor:ns-resize;touch-action:none;position:relative;
  border-radius:12px 12px 0 0;background:var(--parchment-2)}
.chat-grip::before{content:'';position:absolute;left:50%;top:5px;transform:translateX(-50%);
  width:54px;height:3px;border-radius:2px;background:var(--line)}
.chat-grip:hover::before{background:var(--wine)}
html.chat-resizing{cursor:ns-resize;user-select:none}
html.chat-is-docked body{padding-bottom:calc(var(--dockh,40vh) + var(--exitbar) + 1rem)}
html.chat-is-shut #onlineChat.chat-docked{height:auto;min-height:0}
html.chat-is-shut body{padding-bottom:calc(7.5rem + var(--exitbar))}
html.chat-is-shut .chat-grip,
html.chat-is-shut #onlineChat.chat-docked .chat-messages,
html.chat-is-shut #onlineChat.chat-docked .ai-warn{display:none}

/* Less room, less chrome. `tight` drops the standing note and the controls you
   set once; `min` leaves the messages and the box you type in. */
html.dock-tight .ai-warn,
html.dock-tight .ai-extra{display:none!important}
html.dock-tight .ai-bar{padding:.3rem .7rem}
html.dock-tight .chat-head{padding:.3rem .7rem;font-size:.92rem}
html.dock-min .ai-wrap{display:none!important}
html.dock-min .chat-messages{padding:.4rem .7rem}
html.dock-min .chat-compose{padding:.35rem .5rem}

/* which translation, beside the reference — and the quickest way to change it */
.cc-ref{position:relative}
.cc-ref-ver{margin-left:.5rem;font-size:.72em;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  opacity:.7;vertical-align:middle;font-family:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--line);border-radius:7px;background:var(--card);padding:.1rem .4rem;line-height:1.5}
.cc-ref-ver:hover{opacity:1;border-color:var(--wine)}
.ver-menu{position:absolute;z-index:70;margin-top:.25rem;min-width:15rem;padding:.25rem;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.ver-opt{display:flex;gap:.5rem;align-items:baseline;width:100%;text-align:left;cursor:pointer;
  border:0;background:none;color:inherit;font:inherit;padding:.35rem .5rem;border-radius:7px}
.ver-opt:hover{background:var(--parchment-2)}
.ver-opt.on{background:var(--parchment-2);font-weight:700}
.ver-opt b{min-width:2.6rem}
.ver-opt span{font-size:.85em;opacity:.7}

/* ---- your own little Bible, on the side ----
   Not a dialog over the room: a panel you can leave open while the study
   carries on, and hide without losing your place in it. */
.bb-panel{position:fixed;right:1rem;bottom:calc(var(--exitbar) + .6rem);z-index:88;
  width:min(26rem,calc(100vw - 2rem));max-height:min(30rem,calc(var(--vvh,100vh) - 6rem));display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.25)}
html.chat-is-docked .bb-panel{bottom:calc(var(--dockh,40vh) + var(--exitbar) + .6rem)}
.bb-bar{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-bottom:1px solid var(--line);
  background:var(--parchment-2);border-radius:12px 12px 0 0}
.bb-title{font-weight:700;font-size:.92rem}
.bb-mine{flex:1;font-size:.72rem;opacity:.6;font-style:italic;text-align:right}
.bb-x{border:0;background:none;font:inherit;cursor:pointer;color:var(--ink-soft);padding:.1rem .3rem;border-radius:6px}
.bb-x:hover{background:var(--card);color:var(--wine)}
.bb-search{display:flex;gap:.4rem;padding:.5rem .6rem}
.bb-input{flex:1;min-width:0;font:inherit;padding:.4rem .5rem;border:1px solid var(--line);border-radius:9px;
  background:var(--parchment);color:var(--ink)}
.bb-out{flex:1 1 auto;min-height:0;overflow:auto;padding:0 .6rem .6rem}
.bb-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 .4rem}
.bb-head .ref-label{flex:1;min-width:7rem;font-weight:700;color:var(--wine)}
.bb-verse{position:relative;padding:.15rem 1.6rem .15rem 0;line-height:1.5;font-size:.94rem}
.bb-hit{display:flex;gap:.5rem;align-items:flex-start;justify-content:space-between;
  padding:.3rem 0;border-top:1px solid var(--line)}
.bb-hit-text{font-size:.88rem;opacity:.85}
.bb-hit .ref-label{font-size:.8rem;font-weight:700;color:var(--wine)}
.bb-pin{border:0;background:none;cursor:pointer;font-size:.9rem;padding:0 .2rem;border-radius:6px;opacity:.55}
.bb-verse .bb-pin{position:absolute;right:0;top:.15rem}
.bb-pin:hover{opacity:1;background:var(--parchment-2)}
.exit-btn.on{background:var(--parchment-2);color:var(--ink)}
@media (max-width:600px){
  .bb-panel{right:.5rem;left:.5rem;width:auto;max-height:calc(var(--vvh,100vh) - 5.5rem)}
}
/* with the keyboard up it takes the visible window and puts the box on top */
html.kb-open .bb-panel{top:calc(var(--exitbar) + .3rem);bottom:auto;left:.4rem;right:.4rem;width:auto;
  max-height:calc(var(--vvh,100vh) - var(--exitbar) - .8rem)}

/* ---- the passage, pinned to the top ----
   Docked, the Scripture holds the top of the window and scrolls inside itself
   while the rest of the page moves under it. It stacks with the chat's dock:
   text above, talk below, page in between. */
html.read-is-docked .read-block{
  position:fixed;top:var(--exitbar);left:0;right:0;z-index:55;
  display:flex;flex-direction:column;max-height:var(--readh,44vh);height:var(--readh,44vh);
  background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:0 8px 22px rgba(0,0,0,.14);padding:.15rem .7rem 0;
}
html.read-is-docked .read-block>.read-head{flex:none;margin:.15rem 0}
html.read-is-docked .read-block>.scripture{flex:1 1 auto;min-height:0;overflow:auto;
  margin:.2rem 0;border:0;box-shadow:none;padding:.4rem .2rem;background:transparent}
html.read-is-docked .read-block>.verse-nav-wrap{flex:none;margin:0}
html.read-is-docked .read-block>.verse-nav-wrap .hint{display:none}
html.read-is-docked body{padding-top:calc(var(--exitbar) + var(--readh,44vh) + .5rem)}
/* the same grip as the chat's, on the bottom edge */
.read-grip{flex:none;height:12px;cursor:ns-resize;touch-action:none;position:relative;
  margin:0 -.7rem;border-radius:0 0 12px 12px;background:var(--parchment-2)}
.read-grip::before{content:'';position:absolute;left:50%;top:5px;transform:translateX(-50%);
  width:54px;height:3px;border-radius:2px;background:var(--line)}
.read-grip:hover::before{background:var(--wine)}
.dock-chip.on{background:var(--gold);border-color:var(--gold)}
/* the passage keeps the window on a phone, so it may take a little more of it */
@media (max-width:600px){ html.read-is-docked .read-block{padding:.1rem .5rem 0} }

/* Big scripture: the passage gets the window. The docked chat may stay. */
html.big-read .invite-bar,
html.big-read .scoreboard,
html.big-read .view-tabs,
html.big-read .read-what,
html.big-read .reading-tools,
html.big-read .read-mode-row,
html.big-read .refs-panel,
html.big-read .notes-panel,
html.big-read .spectator-note,
html.big-read .watch-switch,
html.big-read .hl-bar,
html.big-read .cmp-bar,
html.big-read .theme-bar,
html.big-read .hl-share,
html.big-read .hl-clear,
html.big-read .ctl-picker,
html.big-read #voiceBar,
html.big-read .hub-head,
html.big-read .verse-nav-wrap .row-actions,
html.big-read .verse-nav-wrap .hint{display:none!important}
html.big-read #app{max-width:56rem;padding-top:.2rem}
html.big-read .panel{background:transparent;border:0;box-shadow:none;padding:0;margin:0}
html.big-read .scripture{margin:.2rem 0 .6rem;font-size:1.06em;line-height:1.75}
html.big-read .read-head{justify-content:flex-end;margin:0}
html.big-read .read-head h3,html.big-read .read-head .cc-ref{font-size:1rem;opacity:.7}
html.big-read .verse-nav-wrap{opacity:.8;margin:.2rem 0}
@media (max-width:600px){#onlineChat.chat-docked{height:var(--dockh,44vh)}}
.chat-messages{max-height:34vh;overflow:auto;padding:.6rem .9rem;display:flex;flex-direction:column;gap:.3rem}
.chat-msg{font-size:.94rem;line-height:1.4}
.chat-from{font-weight:700;color:var(--wine)}
/* AI mode: the guide's strip above the chat box */
.ai-wrap{border-top:1px solid var(--line);background:var(--parchment-2)}
.ai-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;padding:.45rem .7rem;font-size:.9rem}
.ai-bar .btn{padding:.25rem .6rem;font-size:.85rem}
.ai-key-dialog{max-width:520px;text-align:left}
.ai-key-row{display:block;margin:.5rem 0}
.ai-key-row>span{display:block;font-size:.85rem;font-weight:600;margin-bottom:.15rem}
.ai-key-row .cc-dialog-input{width:100%;margin:0}
.ai-lead{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;cursor:pointer}
.ai-warn{margin:0;padding:0 .7rem .5rem;font-size:.8rem;line-height:1.35;opacity:.75;font-style:italic}
.chat-compose{display:flex;gap:.4rem;padding:.5rem .7rem;border-top:1px solid var(--line)}
.chat-compose input{flex:1}
.chat-compose input:disabled{opacity:.6}

/* Saved-game cards with minimap */
.savelist{gap:.8rem}
.save-card{display:flex;gap:.9rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem;box-shadow:var(--shadow)}
.save-mini{width:120px;flex:none;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#dfeaf0;align-self:stretch;min-height:80px}
.save-mini.empty{display:flex;align-items:center;justify-content:center}
.save-mini .biblemap{width:100%;height:100%;display:block}
.save-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.25rem}
.save-title{font-weight:700}
.bp-track.mini{height:8px;margin:.15rem 0}
.log-passage{cursor:pointer}
.log-passage:hover .h-ref{text-decoration:underline}
.hl-count{color:var(--gold);font-size:.85em}

/* Docked map panel */
.map-dock{position:fixed;left:0;right:0;bottom:var(--exitbar);z-index:45;background:var(--card);
  border-top:2px solid var(--gold);box-shadow:0 -6px 24px rgba(60,42,20,.28);
  max-height:52vh;display:flex;flex-direction:column;border-radius:14px 14px 0 0;animation:dockup .25s ease}
.map-dock[hidden]{display:none}
.map-dock.expanded{max-height:92vh}
@keyframes dockup{from{transform:translateY(100%)}to{transform:none}}
.map-dock-head{display:flex;justify-content:space-between;align-items:center;padding:.5rem .9rem;border-bottom:1px solid var(--line);flex:none}
.map-dock-title{font-weight:700}
.map-dock-tools{display:flex;gap:.3rem}
.map-dock-body{overflow:auto;padding:.7rem .9rem;-webkit-overflow-scrolling:touch}
.md-sub{font-weight:700;margin:.7rem 0 .3rem}
.md-sub:first-child{margin-top:0}
.osm-wrap{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#e9edf0}
.osm-embed{width:100%;height:300px;border:0;display:block}
.osm-open{display:inline-block;padding:.4rem .7rem;font-size:.85rem;color:var(--wine)}
.md-place-picker{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem}
.md-place{border:1px solid var(--line);background:var(--parchment);border-radius:999px;padding:.3rem .7rem;font:inherit;font-size:.85rem;cursor:pointer}
.md-place.sel{background:var(--wine);color:#fff;border-color:transparent}
.good-note{color:var(--olive);font-weight:600}

/* Online multiplayer */
.online-choice{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.read-mode-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.5rem 0}
.mark-dots{display:inline-flex;gap:3px;margin-right:.35rem;vertical-align:middle;flex-wrap:wrap}
.mark-dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
/* who marked it: the name rides next to the color when there's room for it */
.mark-dot.named{width:auto;height:auto;border-radius:999px;padding:.02rem .4rem .02rem .3rem;
  display:inline-flex;align-items:center;gap:.25rem;line-height:1.35}
.mark-name{font-size:.62em;font-weight:700;letter-spacing:.01em;color:#2b2119;
  background:rgba(255,253,247,.82);border-radius:999px;padding:0 .3rem;max-width:7rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* no room on a phone — fall back to plain dots (the name stays in the tooltip) */
@media (max-width:560px){
  .mark-dot.named{width:.6rem;height:.6rem;padding:0;border-radius:50%;display:inline-block}
  .mark-name{display:none}
}
.map-hero{max-width:100%;max-height:220px;object-fit:contain;display:block;margin:.4rem auto;border:1px solid var(--line);border-radius:8px;background:#e9dec4}
.ctl-picker{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.5rem 0;padding:.5rem .7rem;background:var(--parchment-2);border:1px solid var(--line);border-radius:10px}
.verse.cur{background:rgba(181,138,46,.16);outline:2px solid var(--gold-2);border-radius:5px}
/* shared / private highlight toggle + private-only marker */
.hl-share{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:.5rem 0}
.hl-share .hl-label{font-size:.85rem;opacity:.8}
.priv-lock{font-size:.7rem;margin-right:.25rem;vertical-align:middle;opacity:.75}
.verse-nav-wrap{margin:.6rem 0}
.verse-nav-wrap .row-actions{margin-top:.5rem}
.verse.cur.hl-1,.verse.cur.hl-2,.verse.cur.hl-3,.verse.cur.hl-4{outline:2px solid var(--gold)}
/* ---- search results: all of them, and a way through them ----
   The count first, then the parts of the Bible they fall in, then fifty at a
   time with the rest a tap (or a scroll) away. */
.search-results{display:flex;flex-direction:column;gap:.4rem;max-height:min(60vh,var(--vvh,100vh));overflow:auto;overscroll-behavior:contain}
.search-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;position:sticky;top:0;z-index:2;
  background:var(--card);padding:.15rem 0 .25rem}
.search-count{font-weight:700}
.search-of{font-size:.82rem;color:var(--ink-soft)}
.search-scopes{display:flex;gap:.3rem;flex-wrap:wrap;position:sticky;top:1.7rem;z-index:2;background:var(--card);padding-bottom:.3rem}
.scope-chip{font:inherit;font-size:.78rem;padding:.15rem .5rem;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.scope-chip:hover{background:var(--parchment-2);color:var(--ink)}
.scope-chip.sel{background:var(--wine);border-color:var(--wine);color:#fff;font-weight:700}
.search-list{display:flex;flex-direction:column}
.search-hit{display:flex;gap:.4rem;align-items:flex-start;border-top:1px solid var(--line);padding:.25rem 0}
.search-hit-main{flex:1;text-align:left;border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:.1rem .2rem;border-radius:8px}
.search-hit-main:hover{background:var(--parchment-2)}
.search-hit .ref-label{font-size:.8rem;font-weight:700;color:var(--wine)}
.search-hit-text{font-size:.9rem;line-height:1.45}
.search-more{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:.3rem 0 .1rem}

/* the other ways to land on a passage, under the box you can type in */
.ref-ways{margin:.35rem 0 0;gap:.35rem}
.ref-ways .btn{font-size:.82rem}
.book-picker{max-width:26rem}
/* choosing what you are called, when you open a room */
.name-pick{margin:.2rem 0 .8rem}
.name-pick .field{margin:0 0 .4rem}
.name-tools{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.35rem}
.name-picker{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.name-chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.5rem 1rem;font:inherit;cursor:pointer}
.name-chip.sel{background:var(--gold);color:var(--gold-ink);border-color:transparent;font-weight:700}
.free-toggle{display:flex;gap:.4rem;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);margin:.6rem 0}
/* the bell: not another grey chip in the row */
.notify-chip{border-color:var(--gold);background:var(--card);color:var(--ink)}
.notify-chip:hover{background:var(--parchment-2)}
.notify-chip.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:700}
/* …and the one moment it is worth offering out loud */
.notify-offer{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 .2rem;
  background:#fff6d8;border:1px solid #e6d29a;color:#5a4a1e;border-radius:10px;padding:.45rem .7rem;font-size:.92rem}
/* a word from whoever runs the site, when there is something to say */
.site-notice{background:#fff6d8;border:1px solid #e6d29a;color:#5a4a1e;border-radius:10px;
  padding:.5rem .75rem;margin:.4rem 0 .6rem;font-size:.92rem}
.invite-bar{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:space-between;
  background:var(--parchment-2);border:1px solid var(--line);border-radius:10px;padding:.45rem .8rem;margin:0 0 .7rem}
.spectator-note{background:#f3e7c9;border:1px solid var(--gold);border-radius:10px;padding:.5rem .8rem;margin:.5rem 0;font-size:.92rem;
  display:flex;gap:.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.watch-switch{margin:.4rem 0;text-align:right}
.hint.locked-hl{color:var(--wine);font-weight:600}
.row-actions.hl-clear{margin-top:.4rem;gap:.4rem}
/* themed alert / confirm / prompt */
/* A dialog is sized against the window you can actually see (--vvh), not the
   one hiding behind the keyboard. With a keyboard up it stops centering and
   sits at the top, so the box being typed into is never the thing covered. */
.cc-dialog-pop{position:fixed;inset:0;background:rgba(20,14,6,.55);display:flex;align-items:center;justify-content:center;
  padding:1.5rem 1rem;z-index:95}
.cc-dialog{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.4);
  padding:1.1rem 1.2rem;max-width:26rem;width:100%;text-align:left;
  max-height:calc(var(--vvh,100vh) - 3rem);overflow:auto;overscroll-behavior:contain}
html.kb-open .cc-dialog-pop{align-items:flex-start;padding:.5rem .5rem 0;height:var(--vvh,100vh)}
html.kb-open .cc-dialog{max-height:calc(var(--vvh,100vh) - 1rem);padding:.7rem .8rem;border-radius:12px}
html.kb-open .cc-dialog h3,html.kb-open .cc-dialog .cc-dialog-title{margin:0 0 .2rem;font-size:1.05rem}
/* the standing explanation is the first thing to go when space is short */
html.kb-open .cc-dialog>.cc-dialog-msg{display:none}
/* the box you are typing in stays put; the answers scroll under it */
html.kb-open .strongs-dialog .cc-dialog-input,
html.kb-open .ref-finder .cc-dialog-input{position:sticky;top:0;z-index:2;margin-top:.2rem}
/* the bars belong to the page, not to the keyboard */
html.kb-open .exit-bottom{display:none}
html.kb-open body{padding-bottom:.5rem}
.cc-dialog-title{margin:0 0 .35rem}
.cc-dialog-msg{margin:0;color:var(--ink-soft);line-height:1.55}
.cc-dialog-input{width:100%;font:inherit;padding:.5rem .6rem;margin:.7rem 0 0;border:1px solid var(--line);
  border-radius:9px;background:var(--parchment);color:var(--ink)}
.cc-dialog-actions{margin-top:1rem;justify-content:flex-end}
.paste-dialog{max-width:40rem}
.progress-dialog{max-width:34rem;max-height:calc(var(--vvh,100vh) - 3rem);overflow:auto}
/* look-up dialog + pinned passages */
.ref-finder{max-width:40rem;max-height:calc(var(--vvh,100vh) - 3rem);overflow:auto}
.ref-results{margin-top:.6rem;display:flex;flex-direction:column;gap:.45rem}
.ref-hit{display:flex;gap:.6rem;align-items:flex-start;justify-content:space-between;
  background:var(--parchment);border:1px solid var(--line);border-radius:9px;padding:.45rem .6rem}
.ref-hit-main{min-width:0}
.ref-hit-text{font-size:.92rem;line-height:1.45}
.refs-panel{background:var(--parchment-2);border:1px solid var(--line);border-radius:12px;padding:.7rem .9rem;margin:.7rem 0}
.refs-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.refs-title{font-weight:700;color:var(--wine)}
.ref-card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem;margin:.5rem 0}
.ref-head{display:flex;align-items:baseline;gap:.5rem}
.ref-label{font-weight:700}
.ref-by{font-size:.78rem;color:var(--ink-soft);flex:1}
.ref-x{background:none;border:0;color:var(--ink-soft);font-size:1rem;cursor:pointer;padding:0 .2rem}
.ref-x:hover{color:var(--wine)}
.ref-body{margin-top:.3rem;line-height:1.55}
.ref-verse{margin:.15rem 0}
.prog-row{margin:.55rem 0}
.prog-head{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;font-size:.9rem;margin-bottom:.2rem}
.prog-name{font-weight:600}
.prog-num{color:var(--ink-soft);font-size:.85rem;white-space:nowrap}
.prog-sub{margin:1rem 0 .2rem;color:var(--wine)}
.paste-text{width:100%;font:inherit;font-size:.95rem;line-height:1.45;padding:.6rem .7rem;margin:.6rem 0 .3rem;
  border:1px solid var(--line);border-radius:9px;background:var(--parchment);color:var(--ink);resize:vertical}
.paste-status{margin:.2rem 0}
.paste-status.warn{color:var(--wine);font-weight:600}
.paste-status.bad{color:#fff;background:var(--wine);border-radius:8px;padding:.25rem .5rem;font-weight:600}
.paste-status.good-note{color:var(--olive);font-weight:600}
.paste-preview{display:flex;flex-direction:column;gap:.25rem;margin:.35rem 0 0;max-height:9rem;overflow:auto}
.paste-line{background:var(--parchment-2);border-radius:8px;padding:.3rem .5rem;font-size:.88rem;line-height:1.4}
.btn.danger{background:var(--wine);color:#f6efe1;border-color:var(--wine)}
.btn.danger:hover{filter:brightness(1.1)}
/* host's shared text / commentary */
.notes-panel{background:var(--parchment-2);border:1px solid var(--gold);border-left:5px solid var(--gold);
  border-radius:10px;padding:.7rem .9rem;margin:.7rem 0}
.notes-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.notes-title{font-weight:700;color:var(--wine)}
.notes-count{font-size:.82rem;color:var(--ink-soft)}
.notes-body{margin:.45rem 0 .2rem;line-height:1.6;white-space:pre-wrap}
.notes-vref{display:inline-block;background:var(--gold);color:var(--gold-ink);border-radius:999px;
  padding:.05rem .5rem;font-size:.78rem;font-weight:700;margin-right:.45rem;vertical-align:.05em}
.notes-nav{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.notes-img{display:block;max-width:100%;max-height:52vh;margin:.6rem 0 0;border:1px solid var(--line);
  border-radius:10px;cursor:zoom-in;background:var(--card)}
.notes-img-row{align-items:center;margin-top:.2rem}
.chat-img{max-width:min(100%,14rem);max-height:10rem;border:1px solid var(--line);border-radius:8px;
  cursor:zoom-in;vertical-align:middle}
.img-viewer{position:fixed;inset:0;background:rgba(12,8,4,.88);display:flex;align-items:center;justify-content:center;
  padding:1rem;z-index:80;cursor:zoom-out}
.img-viewer img{max-width:100%;max-height:100%;border-radius:8px}
.notes-editor .notes-title-input,.notes-editor .notes-text{width:100%;font:inherit;padding:.5rem .6rem;margin:.4rem 0;
  border:1px solid var(--line);border-radius:9px;background:var(--parchment);color:var(--ink)}
.notes-editor .notes-text{line-height:1.5;resize:vertical}
.watch-toggle{display:flex;gap:.45rem;align-items:center;margin:.5rem 0;font-size:.92rem;cursor:pointer}
.score-chip.watching{opacity:.72}
.invite-box{background:var(--parchment-2);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;margin:.6rem 0}
.invite-code{font-size:1.3rem;letter-spacing:.15em;color:var(--wine)}
.invite-code-label{color:var(--ink-soft)}
.invite-link-row{display:flex;gap:.4rem;margin-top:.5rem}
.invite-link{flex:1;font-size:.85rem}
.find-input .type-choices{margin:.5rem 0}
.find-status .roster-row.out{opacity:.6}
.find-status .roster-score{font-size:.85rem}

/* Toast */
/* A word from the app: sits above the bottom bar (and above the docked chat),
   soft-edged and quiet, wrapping like a sentence rather than stretching into a
   long pill across the screen. */
.toast{position:fixed;bottom:calc(var(--exitbar) + .7rem);left:50%;transform:translateX(-50%);
  max-width:min(30rem,calc(100vw - 2rem));width:max-content;text-align:center;text-wrap:balance;
  background:color-mix(in srgb,#2c2013 92%,transparent);color:#f6ecd8;
  padding:.55rem .95rem;border-radius:12px;border:1px solid rgba(216,172,74,.28);
  box-shadow:0 10px 30px rgba(0,0,0,.28);backdrop-filter:blur(8px);
  z-index:95;font-size:.9rem;line-height:1.45;animation:toast-in .22s ease-out}
html.chat-is-docked .toast{bottom:calc(var(--dockh,40vh) + var(--exitbar) + .7rem)}
html.chat-is-shut .toast{bottom:calc(var(--exitbar) + 5rem)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

@media (max-width:560px){
  .hero h1{font-size:2rem}
  .scripture{padding:1.1rem;font-size:1.06rem}
  #app{padding-top:.8rem}
}

/* quick "type a reference" jump on the chapter pickers */
.quick-ref input{margin-bottom:.25rem}
/* the reference box and its Go button sit on one line — phone keyboards do not
   always offer a working return key, so Go is always reachable */
.quick-ref-row{display:flex;gap:.4rem;align-items:stretch}
.quick-ref-row input{flex:1;min-width:0;margin-bottom:.25rem}
.quick-ref-row .quick-go{white-space:nowrap;flex:0 0 auto}
.ref-finder-row{margin:.7rem 0 0;align-items:center}
.ref-finder-row .cc-dialog-input{margin:0}
.quick-ref .hint{display:block;min-height:1.1em;font-size:.85rem}
.quick-ref .hint.good-note{color:var(--olive);font-weight:600}
.acct-join{margin:.6rem 0}
/* the passage a link carried, shown before anybody acts on it */
.link-ref{background:var(--parchment-2);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;padding:.6rem .75rem;margin:.6rem 0}
.link-ref-head{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.link-ref-head .ref-label{font-weight:700;color:var(--wine)}
.link-ref-head .hint{margin:0;font-size:.8rem}
.link-ref-body{margin:.35rem 0 .5rem;font-size:.94rem;line-height:1.5;max-height:9rem;overflow:auto}
.link-ref-ask{display:flex;align-items:flex-start;gap:.45rem;font-size:.9rem;cursor:pointer}
.link-ref-ask input{margin-top:.25rem}

/* what to do with a code nobody is using */
.claim-box{background:var(--parchment-2);border:1px solid var(--line);border-radius:12px;
  padding:.7rem .8rem;margin:.6rem 0}
.claim-box .hint{margin:0 0 .5rem}
/* who you are, on the screen where you are setting a room up */
.setup-acct-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .8rem;
  padding:.5rem .7rem;background:var(--parchment-2);border:1px solid var(--line);border-radius:10px}
.setup-acct-row .hint{flex:1;min-width:12rem;margin:0}

/* maps attached to a room */
.refs-tools{display:flex;gap:.4rem;flex-wrap:wrap}
/* on a phone the panel's own heading row carries the buttons, and the standing
   explanation gets out of the way — the room needs the space for Scripture */
@media (max-width:600px){
  .refs-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
  .refs-head .refs-title{flex:1;min-width:8rem;font-size:.95rem}
  .refs-tools .btn{padding:.2rem .45rem;font-size:.78rem}
  .refs-panel>.hint{display:none}
}
.map-picker{max-width:44rem;max-height:calc(var(--vvh,100vh) - 3rem);overflow:auto}
.map-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.5rem;margin-top:.6rem}
.map-pick{display:flex;flex-direction:column;gap:.25rem;background:var(--parchment);border:1px solid var(--line);
  border-radius:10px;padding:.35rem;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.map-pick:hover{border-color:var(--gold)}
.map-pick img{width:100%;height:6rem;object-fit:cover;border-radius:7px;background:var(--parchment-2)}
.map-pick-title{font-size:.75rem;line-height:1.3;color:var(--ink-soft);max-height:2.6em;overflow:hidden}
.room-map{display:block;width:100%;max-height:56vh;object-fit:contain;margin-top:.4rem;border:1px solid var(--line);
  border-radius:9px;background:var(--card);cursor:zoom-in}

.ref-pending{background:var(--parchment);border:1px dashed var(--gold);border-radius:10px;padding:.5rem .6rem;margin:.5rem 0}
.ref-pending-head{font-weight:700;color:var(--wine);font-size:.9rem;margin-bottom:.35rem}
.ref-pending .ref-hit{background:var(--card)}

/* Strong's */
.strongs-dialog{max-width:38rem;max-height:calc(var(--vvh,100vh) - 3rem);overflow:auto}
.strongs-results{margin-top:.6rem;display:flex;flex-direction:column;gap:.5rem}
.strongs-card{background:var(--parchment);border:1px solid var(--line);border-radius:10px;padding:.55rem .7rem}
.strongs-head{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.strongs-num{font-weight:700;color:var(--wine)}
.strongs-word{font-size:1.15rem}
.strongs-translit{font-size:.85rem;color:var(--ink-soft)}
.strongs-def{margin:.3rem 0 0;line-height:1.5}
.strongs-meta{margin:.2rem 0 0;font-size:.85rem;color:var(--ink-soft);line-height:1.45}

/* 👥 shared vs 👤 my own */
.view-tabs{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap;margin:0 0 .6rem}
.view-tab{background:var(--parchment);border:1px solid var(--line);border-radius:999px;padding:.3rem .85rem;
  font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink)}
.view-tab.sel{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:700}
.view-tabs .hint{font-size:.82rem}

/* the text first; everything else lives behind the cog */
.read-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.2rem 0 .4rem}
.read-what{font-size:.85rem;color:var(--ink-soft);font-weight:600}
.reading-tools{position:relative}
.cog-btn{background:var(--parchment);border:1px solid var(--line);border-radius:9px;width:2.2rem;height:2.2rem;
  font-size:1.05rem;line-height:1;cursor:pointer}
.cog-btn:hover{border-color:var(--gold)}
.reading-tools .tools-body{display:none}
.reading-tools.open .tools-body{display:block;position:absolute;right:0;top:2.6rem;z-index:12;width:min(24rem,88vw);
  background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:.7rem .8rem;
  max-height:70vh;overflow:auto}
.reading-tools.open .tools-body .hl-bar,
.reading-tools.open .tools-body .theme-bar,
.reading-tools.open .tools-body .cmp-bar,
.reading-tools.open .tools-body .hl-share{margin:.35rem 0}
.reading-tools.open .tools-body .reading-options{position:static;box-shadow:none;background:transparent;border:0;padding:0}

/* Strong's numbers in the text */
.stg-line{display:inline}
.stg{cursor:pointer;border-bottom:1px dotted var(--line)}
.stg:hover{background:var(--parchment-2);border-bottom-color:var(--gold)}
.stg-num{font-size:.62em;color:var(--gold);margin-left:.1em;font-weight:700;letter-spacing:.02em}
.scripture.layout-lines .stg-line{display:inline}

/* going straight into a room: hold the screen until it is ready */
.boot-loader{display:none}
html.to-room .boot-loader{display:flex;position:fixed;inset:0;z-index:90;align-items:center;justify-content:center;
  background:var(--parchment)}
html.to-room #app{visibility:hidden}
html.to-room.room-ready .boot-loader{display:none}
html.to-room.room-ready #app{visibility:visible}
.boot-card{display:flex;flex-direction:column;align-items:center;gap:.9rem;color:var(--ink-soft)}
.boot-spinner{width:2.4rem;height:2.4rem;border-radius:50%;border:3px solid var(--line);border-top-color:var(--gold);
  animation:boot-spin .8s linear infinite}
@keyframes boot-spin{to{transform:rotate(360deg)}}
.boot-text{margin:0;font-size:1rem}

/* simple mode — the passage, and a way back */
.read-head-tools{display:inline-flex;gap:.4rem;align-items:center}
.simple-chip{background:var(--parchment);border:1px solid var(--line);border-radius:9px;width:2.2rem;height:2.2rem;
  font-size:1.05rem;line-height:1;cursor:pointer}
.simple-chip:hover{border-color:var(--gold)}
html.simple-mode .topbar,
html.simple-mode .invite-bar,
html.simple-mode .scoreboard,
html.simple-mode .view-tabs,
html.simple-mode .read-what,
html.simple-mode .reading-tools,
html.simple-mode .read-mode-row,
html.simple-mode .refs-panel,
html.simple-mode .notes-panel,
html.simple-mode .spectator-note,
html.simple-mode .watch-switch,
html.simple-mode .hl-bar,
html.simple-mode .cmp-bar,
html.simple-mode .theme-bar,
html.simple-mode .hl-share,
html.simple-mode .hl-clear,
html.simple-mode .ctl-picker,
html.simple-mode #onlineChat,
html.simple-mode #voiceBar,
html.simple-mode .hub-head{display:none!important}
html.simple-mode #app{max-width:44rem;padding-top:.4rem}
html.simple-mode .panel{background:transparent;border:0;box-shadow:none;padding:0;margin:0}
html.simple-mode .scripture{margin:.4rem 0 .8rem}
html.simple-mode .read-head{justify-content:flex-end;margin:0}
html.simple-mode .verse-nav-wrap{opacity:.75}
html.simple-mode .verse-nav-wrap .row-actions,
html.simple-mode .verse-nav-wrap .hint{display:none}

/* the bot sitting in the people list */
.bot-dot{background:repeating-linear-gradient(45deg,var(--olive),var(--olive) 3px,var(--parchment-2) 3px,var(--parchment-2) 6px)}
.bot-chip .nm,.bot-row .roster-name{font-style:italic}
.ai-mode-sel{font-size:.85rem;padding:.2rem .35rem;border:1px solid var(--line);border-radius:7px;background:var(--card);color:inherit}

/* what the room did — quieter than what people said */
.chat-sys{font-size:.82rem;font-style:italic;opacity:.68;line-height:1.4;padding-left:.1rem}
/* a note about a passage carries the words themselves and a way to go there */
.chat-snip{opacity:.85}
.chat-jump{border:0;background:none;cursor:pointer;font:inherit;font-style:normal;
  color:var(--wine);padding:0 .2rem;border-radius:6px;line-height:1}
.chat-jump:hover{background:var(--parchment-2)}
/* a passage somebody typed, made tappable */
.chat-ref{border:0;background:none;font:inherit;cursor:pointer;color:var(--wine);
  text-decoration:underline dotted;text-underline-offset:2px;padding:0;border-radius:4px}
.chat-ref:hover{background:var(--parchment-2);text-decoration-style:solid}
/* the verse you were sent to, so the eye finds it */
.verse.verse-flash{animation:verse-flash 1.4s ease-out}
@keyframes verse-flash{0%{background:rgba(181,138,46,.45)}100%{background:transparent}}

/* the chapter heading is the host's way somewhere else */
.cc-ref-btn{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-bottom:1px dashed transparent}
.cc-ref-btn:hover{border-bottom-color:var(--line)}
.cc-ref-step{display:inline-flex;gap:.15rem;margin-left:.4rem;vertical-align:middle}
.cc-step{font:inherit;line-height:1;color:inherit;cursor:pointer;background:var(--card);border:1px solid var(--line);
  border-radius:7px;padding:0 .4rem;opacity:.7}
.cc-step:hover{opacity:1;border-color:var(--wine)}

/* small menus hung under a chip or a heading */
.pop-menu{position:absolute;z-index:70;margin-top:.3rem;min-width:13rem;padding:.25rem;
  background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.22)}
.pop-opt{display:block;width:100%;text-align:left;cursor:pointer;border:0;background:none;color:inherit;font:inherit;
  padding:.4rem .55rem;border-radius:7px}
.pop-opt:hover{background:var(--parchment-2)}
.pop-opt.danger{color:var(--wine)}
/* the press-and-hold menu is placed where the finger was, not under a chip */
.press-menu{position:fixed;margin-top:0;max-width:min(20rem,92vw)}
.scoreboard{position:relative}
.score-chip.tappable{cursor:pointer}
.score-chip.tappable:hover{border-color:var(--wine)}