/* Extra styles for the author questionnaire (/begin/authors). Loads after begin's own styles. */
.qa-ask{color:var(--ink)!important;font-weight:600}
.qa-free-note{color:#1f8b5b}
.icards.bad-row .icard{border-color:#e05b4a}

/* series rows */
.series-list{max-width:760px;margin:1.8rem auto 0}
.series-row{display:grid;grid-template-columns:1fr 170px;gap:1rem;margin-top:.9rem}
@media(max-width:560px){.series-row{grid-template-columns:1fr 120px;gap:.6rem}}

/* features: the "Free!" reveal */
.goals{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.goal .free-tag{position:absolute;top:-11px;right:-8px;font-style:normal;font-family:var(--disp);font-weight:800;font-size:.8rem;
  letter-spacing:.04em;color:#fff;background:linear-gradient(135deg,#2fa96f,#1f8b5b);padding:.28rem .7rem;border-radius:30px;
  box-shadow:0 6px 16px rgba(31,139,91,.35);opacity:0;transform:scale(.3) rotate(-12deg);pointer-events:none}
.goals.freeing .goal{transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .3s,opacity .3s}
.goals.freeing .goal:not([aria-pressed="true"]){opacity:.4}
.goal.is-free{transform:scale(1.07)!important;z-index:2;border-color:#2fa96f;box-shadow:0 14px 34px rgba(47,169,111,.32)}
.goal.is-free .free-tag{animation:freePop .5s cubic-bezier(.3,1.7,.5,1) forwards}
@keyframes freePop{to{opacity:1;transform:scale(1) rotate(-6deg)}}
.free-sum{text-align:center;font-family:var(--disp);font-weight:800;font-size:clamp(1.2rem,2.6vw,1.6rem);letter-spacing:-.02em;color:#1f8b5b;
  min-height:1.5em;margin-top:1.6rem;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s cubic-bezier(.3,1.4,.5,1)}
.free-sum.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.goal.is-free{transform:none!important}.goal.is-free .free-tag{animation:none;opacity:1;transform:none}}

/* sound: Recommended badge */
.pack{position:relative}
.pack-badge{position:absolute;top:-11px;right:14px;font-family:var(--disp);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:#08203f;background:var(--amber);padding:.3rem .7rem;border-radius:30px;box-shadow:0 6px 14px rgba(245,166,35,.35)}

/* character picker: 5 preview boxes, then a grid of picture cards */
.av-wrap{margin-top:2rem}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;max-width:720px;margin:0 auto}
.slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;background:#fff;border:1.5px solid var(--line);
  border-radius:18px;padding:.7rem .5rem .6rem;min-height:190px;animation:paneIn .3s ease both}
.slot.empty{justify-content:center;background:#eef2f7;border:1.5px dashed #c8d4e3;animation:none}
.slot.empty span{font-family:var(--disp);font-weight:800;font-size:1.4rem;color:#b5c3d4}
.slot.chosen{border-color:var(--amber);background:#fffaf3;box-shadow:0 10px 26px rgba(245,166,35,.22)}
.slot-art{width:100%;height:118px;display:grid;place-items:center;line-height:0}
.slot-art img{max-height:118px;width:auto;max-width:100%}
.slot b{font-family:var(--disp);font-weight:800;font-size:.95rem}
.slot-x{position:absolute;top:6px;right:8px;width:26px;height:26px;border-radius:50%;border:0;background:#eef4fb;color:var(--muted);
  font-size:1.1rem;line-height:1;cursor:pointer}
.slot-x:hover{background:#e05b4a;color:#fff}
.slots.live .slot-x{display:none}
.slot-pick{border:1.5px solid var(--line);background:#fff;color:var(--navy);font-family:var(--disp);font-weight:800;font-size:.74rem;
  padding:.35rem .7rem;border-radius:30px;cursor:pointer;transition:all .2s}
.slot-pick:hover{border-color:var(--amber)}
.slot-pick[aria-pressed="true"]{background:var(--amber);border-color:var(--amber);color:#08203f}
.slot-bar{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin:1.2rem auto 0}
.pv-now:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.slot-hint{color:var(--muted);font-size:.92rem}
.slot-hint.warn{color:#c2402f;font-weight:600}

/* interactions */
.states{max-width:820px;margin:1.4rem auto 0;background:#0d2a63;border-radius:20px;padding:1.1rem 1.2rem;text-align:center;animation:paneIn .35s ease both}
.states p{color:#9fc4f2;font-family:var(--disp);font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.8rem}
.states>div{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.st{position:relative;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-family:var(--disp);font-weight:700;
  font-size:.86rem;padding:.55rem 1rem;border-radius:30px;cursor:pointer;transition:background .2s,transform .2s}
.st:hover{background:var(--sky);border-color:var(--sky);transform:translateY(-2px)}
.st.some{border-style:dashed;border-color:#ffd88a;color:#ffe2a8}
.st.some::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);width:max-content;max-width:240px;
  background:#fff;color:#0f2850;font-family:var(--body);font-weight:500;font-size:.8rem;line-height:1.45;padding:.55rem .75rem;border-radius:10px;
  box-shadow:0 10px 26px rgba(5,20,60,.3);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.st.some:hover::after,.st.some:focus-visible::after{opacity:1;transform:translateX(-50%)}

/* picture cards */
.av-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;margin-top:2rem}
.av{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.15rem;background:#fff;border:1.5px solid var(--line);
  border-radius:18px;padding:.8rem .7rem 1rem;font:inherit;color:inherit;cursor:pointer;transition:all .22s cubic-bezier(.3,1.1,.5,1)}
button.av:hover{border-color:#a9cdf0;transform:translateY(-3px);box-shadow:0 10px 24px rgba(26,79,214,.1)}
.av.on{border-color:var(--sky);background:#f2f9ff;box-shadow:0 0 0 3px rgba(59,174,234,.25)}
.av.full{opacity:.5}
.av.soon{cursor:default}
.av.soon.on{border-color:var(--amber);background:#fffaf3;box-shadow:none}
.av-art{position:relative;width:100%;height:110px;display:grid;place-items:center;margin-bottom:.3rem}
.av-art img{max-height:110px;width:auto;max-width:100%}
.av-q{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:#eef2f7;border:1.5px dashed #c8d4e3;
  font-family:var(--disp);font-weight:800;font-size:1.8rem;color:#b5c3d4}
.av-n{position:absolute;top:0;right:4px;width:26px;height:26px;border-radius:50%;background:var(--sky);color:#fff;font-style:normal;
  font-family:var(--disp);font-weight:800;font-size:.85rem;display:grid;place-items:center}
.av b{font-family:var(--disp);font-weight:800;font-size:1rem}
.av small{font-size:.8rem;color:var(--muted);line-height:1.35}
.av em{font-style:normal;font-size:.78rem;font-weight:600;color:#40587c;line-height:1.35}
.av-tag{font-family:var(--disp);font-weight:800;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:#24307a;
  padding:.18rem .5rem;border-radius:20px;margin:.1rem 0 .15rem}
.av-tag.soon{background:#e3ecf8;color:#6d86a6}
.av.soon .slot-pick{margin-top:.6rem}
@media(max-width:700px){
  .slots{grid-template-columns:repeat(2,1fr)}
  .slot{min-height:170px}.slot-art{height:96px}.slot-art img{max-height:96px}
  .av-grid{grid-template-columns:repeat(2,1fr)}
}

/* Blot rides on the bottom bar */
.q-nav .sp{display:flex;justify-content:center;align-items:flex-end;align-self:stretch}
.qa-blot{margin:-34px 0 -12px;line-height:0}
.qa-blot .blot{--blot-font:var(--disp)}
.done-blot{display:flex;justify-content:center;margin-bottom:1rem}
.done-deal{margin-top:1rem;font-family:var(--disp);font-weight:700;color:#1f8b5b!important;font-size:1rem!important}
@media(max-width:480px){.qa-blot{display:none}}

/* the author note on the intro card */
.begin-in .alt{margin-top:1.1rem;font-size:.95rem}
.begin-in .alt a{color:var(--navy);font-weight:700}

/* "Preview now" loader: appears only after a short beat, so quick loads don't flash */
.pv-load{width:min(420px,100%);text-align:center;opacity:0;animation:pvShow .3s ease .25s forwards}
.pv-track{height:10px;border-radius:999px;background:#e3ecf8;overflow:hidden;position:relative}
.pv-track i{position:absolute;left:0;top:0;bottom:0;width:8%;border-radius:999px;transition:width .45s cubic-bezier(.3,1,.4,1);
  background:linear-gradient(90deg,#3baeea,#1a4fd6,#3baeea);background-size:200% 100%;animation:pvFlow 1.2s linear infinite}
.pv-msg{margin-top:.6rem;font-family:var(--disp);font-weight:700;font-size:.95rem;color:var(--navy);min-height:1.4em}
.pv-load.done .pv-track i{background:linear-gradient(90deg,#2fa96f,#1f8b5b)}
.pv-load.done .pv-msg{color:#1f8b5b}
.pv-load.bad .pv-msg{color:#c2402f}
@keyframes pvShow{to{opacity:1}}
@keyframes pvFlow{to{background-position:-200% 0}}

/* each box while its character wakes up: the picture breathes under a moving shimmer */
.slot.waking .slot-art{position:relative;overflow:hidden;border-radius:12px}
.slot.waking .slot-art img{animation:pvBreathe 1.6s ease-in-out infinite;filter:saturate(.6)}
.slot.waking .slot-art::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);
  background-size:250% 100%;animation:pvShine 1.3s linear infinite}
.slot.waking .slot-pick{visibility:hidden}
.slot.awake .slot-art{animation:pvPop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pvBreathe{50%{transform:scale(.94) translateY(3px);opacity:.75}}
@keyframes pvShine{from{background-position:150% 0}to{background-position:-100% 0}}
@keyframes pvPop{from{transform:scale(.7);opacity:0}}
@media(prefers-reduced-motion:reduce){.slot.waking .slot-art img,.slot.waking .slot-art::after,.pv-track i,.slot.awake .slot-art{animation:none}}

/* Blot's companion on the bottom bar: it grows in beside him, nudging Blot over to the left */
.qa-blot{display:flex;align-items:flex-end;gap:.2rem}
#qaPal{overflow:visible;animation:palIn .7s cubic-bezier(.3,1.4,.5,1) both}
@keyframes palIn{from{width:0;opacity:0;transform:scale(.3) translateY(10px)}to{width:58px;opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){#qaPal{animation:none}}