/* Ask the Book: shared component. Its own visual identity (gold "lantern" on deep ink)
   so the feature reads as special wherever it appears. */
:root{
  --ask-ink:#15120F; --ask-ink-2:#1F1A16; --ask-gold:#E3AC45; --ask-gold-soft:#F3D9A4;
  --ask-cream:#F6F1E8; --ask-muted:#B9AE9F; --ask-line:rgba(227,172,69,.28);
  --ask-display:"Instrument Serif","Times New Roman",serif; --ask-body:"Newsreader",Georgia,serif;
}
.ask-lantern{position:relative;overflow:hidden;background:var(--ask-ink);color:var(--ask-cream);padding:5.5rem 0}
.ask-lantern::before{content:"";position:absolute;inset:-30% -10% auto;height:120%;background:radial-gradient(ellipse at 50% 0%,rgba(227,172,69,.28),rgba(227,172,69,0) 60%);pointer-events:none}
.ask-lantern .ask-inner{position:relative;max-width:44rem;margin:0 auto;padding:0 1.25rem}
.ask-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ask-body);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ask-ink);background:var(--ask-gold);padding:.35rem .8rem;border-radius:99px;font-weight:600}
.ask-badge svg{width:15px;height:15px}
.ask-lantern h2{font-family:var(--ask-display);font-weight:400;font-size:clamp(2.6rem,6vw,4rem);line-height:1.02;margin:1.1rem 0 .8rem;color:var(--ask-cream);text-wrap:balance}
.ask-lantern h2 em{color:var(--ask-gold);font-style:italic}
.ask-lantern .ask-lede{font-family:var(--ask-body);font-size:1.2rem;line-height:1.55;color:#E4DACB;margin:0 0 2rem;max-width:36rem}
/* chat */
.ask-chat{font-family:var(--ask-body)}
.ask-log{display:flex;flex-direction:column;gap:1.3rem;margin:0 0 1.4rem}
.ask-log:empty{display:none}
.ask-q{color:var(--ask-gold-soft);font-size:1rem}
.ask-q::before{content:"You asked  ";color:var(--ask-muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}
.ask-a{font-size:1.1rem;line-height:1.65;color:var(--ask-cream);background:var(--ask-ink-2);border:1px solid var(--ask-line);border-left:3px solid var(--ask-gold);padding:1rem 1.2rem}
.ask-a p{margin:0 0 .8em}.ask-a p:last-child{margin:0}
.ask-a ul{margin:0 0 .8em;padding-left:1.2rem}
.ask-a.err{border-left-color:var(--ask-muted);color:var(--ask-muted)}
.ask-a.wait{color:var(--ask-muted);font-style:italic}
.ask-a.wait::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:askdots 1.2s steps(4) infinite}
@keyframes askdots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.ask-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1rem}
.ask-chips button{font-family:var(--ask-body);font-size:.95rem;background:rgba(227,172,69,.08);border:1px solid var(--ask-line);color:var(--ask-gold-soft);padding:.5rem .95rem;border-radius:99px;cursor:pointer;transition:background .15s,border-color .15s}
.ask-chips button:hover{background:rgba(227,172,69,.18);border-color:var(--ask-gold)}
.ask-form{display:flex;gap:.6rem;padding:.4rem;background:var(--ask-cream);border-radius:6px;box-shadow:0 0 0 1px var(--ask-gold),0 0 40px rgba(227,172,69,.35)}
.ask-form input{flex:1;min-width:0;font-family:var(--ask-body);font-size:1.1rem;padding:.8rem .9rem;border:0;background:transparent;color:var(--ask-ink)}
.ask-form input:focus{outline:none}
.ask-form button{font-family:var(--ask-body);font-size:.95rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.8rem 1.4rem;background:var(--ask-ink);color:var(--ask-gold);border:0;border-radius:4px;cursor:pointer}
.ask-form button:hover{background:#000}
.ask-form button:disabled{opacity:.55;cursor:default}
.ask-form:focus-within{box-shadow:0 0 0 2px var(--ask-gold),0 0 50px rgba(227,172,69,.5)}
.ask-fine{font-size:.85rem;color:var(--ask-muted);margin:.9rem 0 0}
/* floating pill */
.ask-pill{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:50;display:inline-flex;align-items:center;gap:.55rem;font-family:var(--ask-body);font-size:1rem;font-weight:600;color:var(--ask-ink);background:var(--ask-gold);border:0;border-radius:99px;padding:.8rem 1.15rem;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.25),0 0 0 0 rgba(227,172,69,.6);animation:askpulse 2.8s ease-out infinite;transition:transform .2s,opacity .25s}
.ask-pill:hover{transform:translateY(-2px)}
.ask-pill svg{width:20px;height:20px}
.ask-pill.hide{opacity:0;pointer-events:none;transform:translateY(10px)}
@keyframes askpulse{0%{box-shadow:0 8px 30px rgba(0,0,0,.25),0 0 0 0 rgba(227,172,69,.55)}70%{box-shadow:0 8px 30px rgba(0,0,0,.25),0 0 0 16px rgba(227,172,69,0)}100%{box-shadow:0 8px 30px rgba(0,0,0,.25),0 0 0 0 rgba(227,172,69,0)}}
/* modal */
.ask-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;background:rgba(10,8,6,.55);padding:0}
.ask-modal[hidden]{display:none!important}
.ask-sheet{width:100%;max-width:40rem;max-height:88vh;overflow:auto;background:var(--ask-ink);color:var(--ask-cream);border-radius:14px 14px 0 0;padding:1.4rem 1.25rem calc(1.4rem + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 60px rgba(227,172,69,.25)}
@media (min-width:700px){.ask-modal{align-items:center}.ask-sheet{border-radius:14px}}
.ask-sheet-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 1rem}
.ask-sheet-head h3{font-family:var(--ask-display);font-weight:400;font-size:2rem;margin:.5rem 0 0;color:var(--ask-cream)}
.ask-close{font:inherit;font-size:1.6rem;line-height:1;background:transparent;border:0;color:var(--ask-muted);cursor:pointer;padding:.2rem .5rem}
/* inline invite (used at the end of games) */
.ask-invite{background:var(--ask-ink);color:var(--ask-cream);padding:1.4rem;border-radius:6px;position:relative;overflow:hidden}
.ask-invite::before{content:"";position:absolute;inset:-60% -20% auto;height:160%;background:radial-gradient(ellipse at 50% 0%,rgba(227,172,69,.3),transparent 60%);pointer-events:none}
.ask-invite>*{position:relative}
.ask-invite h4{font-family:var(--ask-display);font-weight:400;font-size:1.8rem;line-height:1.1;margin:.7rem 0 .4rem;color:var(--ask-cream)}
.ask-invite p{margin:0 0 1rem;color:#E4DACB}
.ask-pill:focus-visible,.ask-chips button:focus-visible,.ask-form button:focus-visible,.ask-close:focus-visible{outline:2px solid var(--ask-gold);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.ask-pill{animation:none}.ask-a.wait::after{animation:none;content:"..."}}
/* hero teaser link on the book page */
.ask-hero-link{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.4rem;font-family:var(--ask-body);font-size:1rem;color:var(--ask-ink);text-decoration:none;background:linear-gradient(90deg,rgba(227,172,69,.28),rgba(227,172,69,.06));border:1px solid rgba(227,172,69,.6);padding:.55rem .9rem .55rem .6rem;border-radius:99px}
.ask-hero-link b{background:var(--ask-gold);color:var(--ask-ink);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:.2rem .55rem;border-radius:99px;font-weight:600}
.ask-hero-link:hover{border-color:var(--ask-gold);color:#000}