.ht-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; border: 2px solid #bdd8ef; border-radius: 24px; color: #153451; background: #f5faff; }
.ht-dialog::backdrop { background: #102c4c88; }
.ht-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-dialog button { min-height: 44px; white-space: normal; }
.ht-dialog button:focus-visible, .ht-dialog input:focus-visible { outline: 3px solid #925c00; outline-offset: 3px; }
.ht-motion { display: block; margin: 12px 0; }
.ht-prototype { font-size: .75rem; color: #596979; }
.ht-stage { height: 140px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ht-character { width: 112px; height: 112px; transform-origin: 50% 85%; }
.ht-caption { font-size: 1.1rem; line-height: 1.5; min-height: 3em; }
.ht-content { display: flex; flex-wrap: wrap; gap: 12px; }
.ht-content > p, .ht-answer, .ht-counters { width: 100%; }
.ht-answer { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.ht-answer input { width: 100px; display: block; padding: 10px; font-size: 1.2rem; }
.ht-answer:has(input[type="text"]) label { width: 100%; min-width: 0; }
.ht-answer input[type="text"] { width: 100%; box-sizing: border-box; }
.ht-live-history { width: 100%; min-width: 0; overflow-wrap: anywhere; }
.ht-counters { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 0; }
.ht-counters span { width: 19px; height: 19px; border-radius: 50%; border: 1px solid #173d60; }
.ht-blue { background: #1976c9; } .ht-gold { background: #efb735; }
.ht-resume { position: fixed; right: 12px; bottom: 88px; z-index: 20; max-width: calc(100vw - 24px); box-shadow: 0 4px 18px #16375044; }
.ht-resume[hidden], .ht-dialog [hidden] { display: none !important; }
.ht-field-guide { display: flex; align-items: center; gap: 16px; width: 100%; padding: 12px; background: #e8f4ff; color: #153451; border-radius: 16px; }
.ht-field-guide .ht-character { width: 64px; height: 64px; flex: none; }
.ht-field-guide .ht-character[data-action="point"] { transform: rotate(-8deg); animation: ht-land .5s ease-out; }
@keyframes ht-fly { from { transform: translate(-180px, -100px) rotate(-15deg); } 75% { transform: translate(0, -12px) rotate(4deg); } to { transform: none; } }
@keyframes ht-land { 50% { transform: scale(1.08, .92); } }
@keyframes ht-point { 50% { transform: translateX(65px) rotate(12deg); } }
@keyframes ht-celebrate { 50% { transform: translateY(-22px) rotate(-8deg); } }
@keyframes ht-talk { 50% { transform: scale(1.035) rotate(2deg); } }
.ht-reduced .ht-character { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) { .ht-character { animation: none !important; transform: none !important; } }
/* Hoot lives outside the card and travels between its real page targets. */
.ht-dialog { position: fixed; inset: auto 24px 100px auto; margin: 0; width: min(480px, calc(100vw - 40px)); max-height: calc(100dvh - 230px); z-index: 1001; box-shadow: 0 16px 60px #12375840; }
.ht-stage { display: none; }
.ht-character { position: fixed; left: 16px; top: 16px; width: 200px; height: 200px; z-index: 1002; pointer-events: none; animation: none !important; }
.ht-sprite { width: 100%; height: 100%; background: url('/hoot-tour/poses.png') 0 0 / 300% 200% no-repeat; filter: drop-shadow(0 8px 5px #16375025); animation: ht-hover 3s ease-in-out infinite; }
.ht-character.ht-speaking:not([data-action="fly"]) .ht-sprite { animation: ht-mouth .38s steps(1) infinite; }
.ht-reduced .ht-sprite, .ht-paused .ht-sprite { animation: none !important; }
.ht-resume { z-index: 1003; }
@keyframes ht-wings { 0%,100% { background-position: 50% 0; } 50% { background-position: 100% 0; } }
@keyframes ht-mouth { 0%,100% { background-position: 0 0; } 50% { background-position: 50% 100%; } }
@keyframes ht-hover { 50% { transform: translate(12px,-14px) rotate(2deg); } }
@keyframes ht-touchdown { 50% { transform: scale(1.06,.94); } }
@keyframes ht-cheer { 50% { transform: translateY(-28px) rotate(-8deg); } }
@media (max-width: 700px) { .ht-dialog { right: 12px; bottom: 85px; width: calc(100vw - 24px); padding: 14px; } .ht-character { width: 130px; height: 130px; } .ht-caption { font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .ht-sprite { animation: none !important; } }

.ht-character[data-action="fly"] .ht-sprite { animation: ht-wings .32s steps(1) infinite; }
.ht-character[data-action="land"] .ht-sprite { animation: ht-touchdown .4s ease-out, ht-hover 3s .4s ease-in-out infinite; }
.ht-character[data-action="point"] .ht-sprite { background-position: 0 100%; }
.ht-character[data-action="celebrate"] .ht-sprite { background-position: 100% 100%; animation: ht-cheer .6s ease-in-out 3; }
.ht-character.ht-speaking:not([data-action="fly"]):not([data-action="celebrate"]) .ht-sprite { animation: ht-mouth .38s steps(1) infinite; }
.ht-character.ht-reduced .ht-sprite { animation: none !important; }
.ht-dialog { box-sizing: border-box; max-width: calc(100% - 24px); }
.ht-character.ht-paused .ht-sprite { animation-play-state: paused !important; }
/* Count on: 8 blue counters, then 5 big gold counters to tap (9, 10, 11, 12, 13). */
.ht-count-on { align-items: center; gap: 10px 14px; }
.ht-eight { display: grid; grid-template-columns: repeat(4, 18px); gap: 4px; align-items: center; position: relative; padding: 8px; border: 2px solid #296294; border-radius: 10px; }
.ht-eight b { position: absolute; top: -12px; left: 8px; background: #1976c9; color: #fff; font-size: .8rem; padding: 0 6px; border-radius: 8px; }
.ht-plus { font-size: 1.4rem; }
.ht-five { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-counters .ht-tap { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #9a6a10; background: #efb735; font: 800 1.05rem system-ui, sans-serif; color: #fff; cursor: pointer; padding: 0; box-shadow: 0 3px 0 #b8821c; transition: transform .15s; }
.ht-counters .ht-tap:not(:disabled):hover { transform: translateY(-2px); }
.ht-counters .ht-tap:focus-visible { outline: 3px solid #1976c9; outline-offset: 2px; }
.ht-counters .ht-tap.ht-counted { background: #2e9d5b; border-color: #1d6b3d; box-shadow: 0 3px 0 #1d6b3d; cursor: default; }
.ht-wiggle .ht-tap { animation: ht-wiggle .45s ease-in-out 2; }
@keyframes ht-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .ht-wiggle .ht-tap { animation: none; } }
.ht-feedback { padding: 10px 12px; border-left: 4px solid #bf8b25; background: #fff4db; border-radius: 8px; margin: 0; }
.ht-feedback[data-correct="true"] { border-color: #16744b; background: #e0f5e9; color: #115734; font-weight: 700; }
.ht-new-counter { animation: ht-counter-arrive .6s ease-out; }
@keyframes ht-counter-arrive { from { transform: translateX(90px); opacity: .2; } to { transform: none; opacity: 1; } }
.ht-reduced .ht-new-counter { animation: none; }
@media (prefers-reduced-motion: reduce) { .ht-new-counter { animation: none; } }

/* Separate depth/hover from the pose layer so speaking never stops the float. */
.ht-character { perspective: 650px; isolation: isolate; pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: transparent; box-shadow: none; touch-action: manipulation; }
.ht-character:focus-visible { outline: 3px solid #375adc; outline-offset: 3px; border-radius: 24px; }
.ht-character .ht-body, .ht-character .ht-floor-shadow { pointer-events: none; }
.ht-tap-label { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #fff2a5; color: #153451; border: 2px solid #c18a13; border-radius: 18px; padding: 5px 10px; font: 800 14px/1.2 system-ui; box-shadow: 0 3px 12px #15345125; }
.ht-content > button:first-of-type { border: 2px solid #bd8110; background: #fff2a5; color: #153451; font-weight: 800; }
.hw-card { display: flex; align-items: center; justify-content: center; gap: 24px; border: 2px solid #c4d9ef; border-radius: 24px; padding: 24px; background: #eff8ff; margin-bottom: 20px; }
.hw-tap { flex: none; display: flex; flex-direction: column; align-items: center; border: 3px solid #d39417; border-radius: 24px; background: #fff9dc; padding: 8px; color: #153451; cursor: pointer; touch-action: manipulation; }
.hw-figure { width: 160px; height: 160px; animation: hw-bounce 1.3s ease-in-out 3; }
.hw-invite { display: flex; flex-direction: column; gap: 3px; font: 700 14px system-ui; }
.hw-invite b { font-size: 19px; }
.hw-copy { max-width: 400px; }
.welcome .hw-card { max-width: 720px; margin: 16px auto 20px; text-align: left; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html:not(.native-app) #onboarding .welcome > .hw-card {
    grid-column: 2; grid-row: 2 / span 2; width: 100%; box-sizing: border-box;
    margin: 0 0 24px; gap: 16px; padding: 20px; align-self: start;
  }
  html:not(.native-app) #onboarding .welcome .hw-card ~ .peek { grid-row: 4 / span 2; align-self: start; }
  html:not(.native-app) #onboarding .welcome .hw-copy h2 { font-size: 1.4rem; }
  html:not(.native-app) #onboarding .welcome .hw-copy p { margin: 8px auto 12px; font-size: 1rem; }
}
.hw-copy button { margin: 4px; min-height: 44px; }
.hw-tap:focus-visible { outline: 4px solid #375adc; outline-offset: 4px; }
@keyframes hw-bounce { 50% { transform: translateY(-12px) rotate(3deg); } }
.hw-still .hw-figure { animation: none; }
@media (prefers-reduced-motion: reduce) { .hw-figure { animation: none; } }
@media (max-width: 540px) { .hw-card { flex-direction: column; gap: 12px; padding: 16px; text-align: center; } .hw-figure { width: 130px; height: 130px; } }
.ht-body { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 65%; animation: ht-drift 6s ease-in-out infinite; }
.ht-floor-shadow { position: absolute; left: 23%; right: 23%; bottom: 3%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, #17354d50, #17354d00 72%); filter: blur(4px); animation: ht-shadow-depth 6s ease-in-out infinite; }
.ht-sprite { animation: none; filter: drop-shadow(4px 12px 8px #133c542c); }
.ht-character[data-action="land"] .ht-sprite { animation: ht-touchdown .4s ease-out; }
@keyframes ht-drift {
  0%, 100% { transform: translate3d(0,-6px,0) rotateY(-7deg) rotateZ(-2deg); }
  35% { transform: translate3d(10px,-23px,20px) rotateY(8deg) rotateZ(2deg); }
  70% { transform: translate3d(-7px,-13px,8px) rotateY(2deg) rotateZ(-1deg); }
}
@keyframes ht-shadow-depth { 0%,100% { transform: scale(1); opacity: .8; } 35% { transform: scale(.74); opacity: .4; } 70% { transform: scale(.88); opacity: .6; } }
.ht-reduced .ht-body, .ht-reduced .ht-floor-shadow { animation: none !important; transform: none !important; }
.ht-paused .ht-body, .ht-paused .ht-floor-shadow { animation-play-state: paused !important; }
.ht-toolbar { position: sticky; top: -14px; z-index: 2; background: #f5faff; padding: 8px 0; }
@media (max-width: 700px) {
  .ht-dialog { bottom: max(12px, env(safe-area-inset-bottom)); max-height: calc(100dvh - 160px); overscroll-behavior: contain; }
  .ht-character { width: 120px; height: 120px; }
  .ht-answer input { font-size: 16px; }
  .ht-toolbar { gap: 6px; }
  .ht-toolbar button { flex: 1 1 43%; font-size: .85rem; padding: 8px; }
}
@media (max-width: 420px) {
  .ht-counters .ht-tap { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ht-body, .ht-floor-shadow { animation: none !important; transform: none !important; } }