/* The helper on every page (js/helper.js) and the screen guide (js/guide.js). Plain CSS for Chrome/Edge 109 and
   Firefox 115: no :has, no nesting, no colour blends. Phones: the panel fills the screen width. */
.hp-fab{position:fixed;right:calc(1rem + var(--sa-r, 0px));bottom:calc(6.5rem + var(--sa-b, 0px));z-index:45;width:3.3rem;height:3.3rem;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(180deg,#FFD979,var(--gold));color:var(--ink-on-gold);box-shadow:0 4px 0 var(--gold-d),0 8px 22px rgba(0,0,0,.35);
  touch-action:none;-webkit-user-select:none;user-select:none;transition:transform 120ms}
.hp-fab .ic{width:1.5rem;height:1.5rem}
.hp-fab:active{transform:translateY(3px)}
.hp-fab .hp-ring{position:absolute;inset:-.35rem;border-radius:50%;border:.2rem solid var(--gold);opacity:0;pointer-events:none}
.hp-fab.holding .hp-ring{animation:hpHold .52s linear forwards}
@keyframes hpHold{0%{opacity:.2;transform:scale(.85)}100%{opacity:1;transform:scale(1.08)}}
body.attract .hp-fab,body.attract .hp-panel,body.attract .hp-guide,body.hp-open .hp-fab{display:none}
#askBtn.holding{color:var(--gold)}

.hp-panel{position:fixed;right:calc(1rem + var(--sa-r, 0px));bottom:calc(1rem + var(--sa-b, 0px));top:calc(3.6rem + var(--sa-t, 0px));z-index:75;width:min(26rem,calc(100vw - 2rem));
  display:flex;flex-direction:column;gap:.55rem;padding:.8rem .9rem;background:var(--s1);border:1px solid var(--hair);border-radius:1.1rem;box-shadow:0 18px 50px rgba(0,0,0,.45);
  animation:hpIn var(--t-base, .25s) var(--ez, ease) both}
@keyframes hpIn{from{opacity:0;transform:translateY(.8rem)}to{opacity:1;transform:none}}
.hp-h{display:flex;align-items:center;gap:.6rem}
.hp-h img{width:1.9rem;height:1.9rem}
.hp-h b{display:block;font-size:1.02rem}
.hp-h .sm{display:block;font-size:.74rem}
.hp-keep{margin:0;padding:.45rem .65rem;border-radius:.7rem;background:var(--s2);font-size:.74rem;line-height:1.35}
.hp-th{flex:1;min-height:5rem;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding:.1rem;-webkit-overflow-scrolling:touch}
.hp-th .as-msg{max-width:100%;font-size:.92rem}
.hp-empty{margin:auto 0;text-align:center}
.hp-sug{display:flex;flex-wrap:wrap;gap:.35rem}
.hp-sug .ch,.hp-guide .ch{display:inline-flex;align-items:center;gap:.3rem;padding:.42rem .75rem;border-radius:99px;background:var(--s2);border:1px solid var(--hair);font-size:.78rem;font-weight:700;color:var(--paper);text-align:left;min-height:2.3rem}
.hp-sug .ch.hp-show{border-color:rgba(240,185,76,.5);color:var(--gold)}
.hp-sug .ch .ic{width:.95rem;height:.95rem}
.hp-comp{display:flex;gap:.45rem;align-items:center}
.hp-comp input{flex:1;min-width:0;height:2.6rem;padding:0 .8rem;border-radius:.8rem;border:1px solid var(--hair);background:var(--s2);color:var(--paper);font-size:.92rem}
.hp-comp .btn{width:2.8rem;padding:0;flex:none}
.hp-locked{margin:0}
.hp-how{width:100%;margin-top:.15rem;font-size:.74rem;color:var(--mut)}
.hp-how summary{cursor:pointer;font-weight:700}
.hp-how ol{margin:.3rem 0 0;padding-left:1.1rem}
.hp-how li{margin:.12rem 0}
.hp-how b{color:var(--paper);font-weight:700;margin-right:.25rem}

.hp-guide{position:fixed;left:50%;bottom:calc(1rem + var(--sa-b, 0px));transform:translateX(-50%);z-index:76;width:min(34rem,calc(100vw - 2rem));
  display:flex;flex-direction:column;gap:.55rem;padding:.8rem .9rem;background:var(--s1);border:1px solid rgba(240,185,76,.45);border-radius:1.1rem;box-shadow:0 18px 50px rgba(0,0,0,.45)}
.hp-gh{display:flex;align-items:center;gap:.5rem}
.hp-gh b{display:inline-flex;align-items:center;gap:.35rem;color:var(--gold)}
.hp-gnote{margin:0}
.hp-gnote:empty{display:none}
.gd-ring{position:fixed;z-index:77;border-radius:.9rem;border:.22rem solid var(--gold);box-shadow:0 0 0 9999px rgba(4,12,9,.55);pointer-events:none;animation:gdPulse 1.3s ease-in-out infinite}
@keyframes gdPulse{50%{border-color:#FFE7A6}}
.gd-bubble{position:fixed;z-index:78;width:min(17.5rem,calc(100vw - 1rem));padding:.75rem .85rem;border-radius:.9rem;background:var(--paper);color:#1C3127;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.gd-bubble b{display:block;font-size:.95rem;margin-bottom:.2rem}
.gd-bubble p{margin:0 0 .55rem;font-size:.88rem;line-height:1.4}

@media (max-width:599px){
  .hp-fab{bottom:calc(5.2rem + var(--sa-b, 0px));right:calc(.7rem + var(--sa-r, 0px));width:max(48px,3rem);height:max(48px,3rem)}
  .hp-panel{left:.5rem;right:.5rem;width:auto;top:calc(3.4rem + var(--sa-t, 0px));bottom:calc(.5rem + var(--sa-b, 0px))}
  .hp-guide{width:calc(100vw - 1rem)}
}