/* Подсказки с персонажами (hints.js) */
#htLayer{position:fixed;inset:0;z-index:100000;pointer-events:none;display:none;font-family:Manrope,"Segoe UI",Arial,sans-serif}
#htLayer.on{display:block}

.ht-ring{position:fixed;display:none;border:2px solid #f2c14e;border-radius:16px;pointer-events:none;box-shadow:0 0 0 5px rgba(242,193,78,.22),0 0 30px rgba(242,193,78,.55);animation:htPulse 1.5s ease-in-out infinite;transition:left .22s ease,top .22s ease,width .22s ease,height .22s ease}
@keyframes htPulse{0%,100%{box-shadow:0 0 0 3px rgba(242,193,78,.18),0 0 18px rgba(242,193,78,.4)}50%{box-shadow:0 0 0 9px rgba(242,193,78,.1),0 0 38px rgba(242,193,78,.75)}}

.ht-gest{position:fixed;display:none;width:54px;height:54px;margin:-27px 0 0 -27px;font-size:36px;line-height:54px;text-align:center;pointer-events:none;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));animation:htDown 1.1s ease-in-out infinite}
.ht-gest.swipe{animation:htSwipe 1.7s ease-in-out infinite}
.ht-gest.up{animation:htUp 1.1s ease-in-out infinite}
.ht-gest.tap{animation:htTap 1.1s ease-in-out infinite}
@keyframes htDown{0%,100%{transform:translateY(-8px)}50%{transform:translateY(10px)}}
@keyframes htUp{0%,100%{transform:translateY(8px)}50%{transform:translateY(-10px)}}
@keyframes htTap{0%,100%{transform:translateY(8px) scale(1)}45%{transform:translateY(-6px) scale(1.12)}60%{transform:translateY(-2px) scale(.94)}}
@keyframes htSwipe{0%,100%{transform:translateX(-46px)}50%{transform:translateX(46px)}}

.ht-card{position:fixed;left:0;top:0;width:min(372px,calc(100vw - 20px));display:flex;align-items:flex-end;pointer-events:auto;animation:htIn .42s cubic-bezier(.2,1.25,.3,1) both;-webkit-tap-highlight-color:transparent}
@keyframes htIn{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.ht-face{position:relative;z-index:2;flex:none;width:108px;height:auto;max-height:150px;object-fit:contain;object-position:bottom;margin:0 -8px -7px 0;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));animation:htBob 2.8s ease-in-out infinite;user-select:none;-webkit-user-drag:none}
@keyframes htBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-5px) rotate(1.5deg)}}

.ht-bub{position:relative;flex:1;min-width:0;color:#f6f1e6;background:linear-gradient(180deg,#2a2630,#18161c);border:2px solid #e3b04b;border-radius:18px 18px 18px 5px;padding:12px 34px 10px 18px;box-shadow:0 16px 44px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.ht-bub::before{content:"";position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:#2a2630;border-left:2px solid #e3b04b;border-bottom:2px solid #e3b04b;transform:rotate(45deg) skew(8deg,8deg)}
.ht-who{display:block;font-weight:800;font-size:10.5px;line-height:1;font-family:inherit;letter-spacing:.14em;text-transform:uppercase;color:#f2c14e;margin-bottom:6px}
.ht-tx{margin:0;font-weight:600;font-size:13.5px;line-height:1.42;font-family:inherit;color:#f6f1e6}
.ht-foot{display:flex;align-items:center;gap:8px;margin-top:10px}
.ht-step{flex:1;font-weight:700;font-size:10px;line-height:1;font-family:inherit;letter-spacing:.08em;color:rgba(246,241,230,.5)}
.ht-ok,.ht-off{appearance:none;border:0;cursor:pointer;font-weight:800;font-size:11.5px;line-height:1;font-family:inherit;border-radius:999px;padding:8px 13px}
.ht-ok{background:#f2c14e;color:#1b1608}
.ht-ok:active{transform:scale(.96)}
.ht-off{background:transparent;color:rgba(246,241,230,.55);padding:8px 4px}
.ht-off:hover{color:#f6f1e6}
.ht-x{position:absolute;top:6px;right:7px;width:24px;height:24px;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:#f6f1e6;font-size:16px;line-height:24px;font-family:inherit;cursor:pointer;padding:0}
.ht-x:hover{background:rgba(255,255,255,.18)}

.ht-pt{position:absolute;display:none;width:16px;height:16px;background:#e3b04b;transform:rotate(45deg);border-radius:3px;pointer-events:none}
.ht-pt.top{top:-8px}
.ht-pt.bottom{bottom:-8px}

@media (max-width:420px){
  .ht-face{width:92px;max-height:128px}
  .ht-tx{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ht-ring,.ht-gest,.ht-face,.ht-card{animation:none!important}
}