/* 新手指引：小猫头顶的心里话小气泡（第一句带头像）· 指路小箭头 · 选格时压暗全屏只留互动键 · 快捷栏 / 行囊轻提示。只用 HUD 现有的纸色、墨线与朱砂色，不新增素材 */
#tut-veil { position: fixed; inset: 0; z-index: 30; background: rgba(20,16,12,.62); }
#tut-veil[hidden], #tut-ring[hidden] { display: none; }
#tut-ring { position: fixed; z-index: 30; box-sizing: border-box; border: 3px solid #a8392b; border-radius: 50%; animation: tutPulse 1.1s ease-in-out infinite; pointer-events: none; }
.tut-hl { outline: 3px solid #a8392b !important; outline-offset: 1px; animation: tutPulse 1.1s ease-in-out infinite; }
@keyframes tutPulse { 50% { opacity: .45; } }

#tut-bub { position: fixed; left: 0; top: 0; z-index: 60; display: none; align-items: center; gap: 5px; width: max-content; max-width: 150px; box-sizing: border-box; padding: 4px 8px;
  font: 12px/1.45 "猫田楷", serif; color: #3a3436; background: #f5efdc; border: 1.5px solid #6b5a42; border-radius: 7px; box-shadow: 0 2px 0 rgba(42,32,24,.3); pointer-events: none; }
#tut-bub.on { display: flex; }
#tut-bub::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 9px; height: 9px; margin-left: -5px; background: #f5efdc; border-right: 1.5px solid #6b5a42; border-bottom: 1.5px solid #6b5a42; transform: rotate(45deg); }
#tut-bub .tut-av { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fbf6e6; box-shadow: 0 0 0 1.5px #6b5a42; image-rendering: pixelated; }
#tut-bub .tut-av[hidden] { display: none; }
#tut-arrow { position: fixed; left: 0; top: 0; z-index: 59; width: 32px; height: 20px; display: none; pointer-events: none; transform-origin: 16px 10px; }
#tut-arrow.on { display: block; }
#tut-arrow svg { width: 100%; height: 100%; fill: #a8392b; stroke: #fbf6e6; stroke-width: 1.5; paint-order: stroke; filter: drop-shadow(0 1px 1px rgba(0,0,0,.45)); animation: tutBob .9s ease-in-out infinite; }
#tut-arrow.edge svg { animation-name: tutNudge; }
@keyframes tutBob { 50% { transform: translateY(5px); } }
@keyframes tutNudge { 50% { transform: translateY(4px); opacity: .7; } }
