/* Tap hold (see taphold.js). Remove this file and its <link> to drop the feature's styles. */

/* Circle | Tap hold toggle, top-left of the wall */
.th-mode { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; gap: 3px; padding: 3px; border-radius: 12px; background: rgba(17,20,27,.86); border: 1px solid var(--line); }
.th-mode button { border: 0; background: transparent; color: var(--muted); font-weight: 600; font-size: 13px; padding: 8px 12px; border-radius: 9px; cursor: pointer; }
.th-mode button.on { background: var(--accent); color: var(--accent-ink); }
.fse.placing .th-mode { display: none; }

/* Message row above the hold type buttons */
.th-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 520px; margin: 0 auto 8px; }
.th-row[hidden] { display: none; }
.th-msg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--chalk); font-weight: 600; }
.fse.th-row-on .fse-hint { display: none; }

/* Spinner + pulsing ring while an outline is being found */
.th-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(238,243,246,.3); border-top-color: var(--chalk); animation: th-spin .7s linear infinite; }
@keyframes th-spin { to { transform: rotate(360deg); } }
.th-pulse { animation: th-pulse .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes th-pulse { 50% { opacity: .35; transform: scale(.8); } }

/* First-time tip */
.th-tip { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 4; width: min(320px, calc(100% - 32px)); padding: 14px 16px; border-radius: 14px; background: rgba(17,20,27,.96); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.45); text-align: center; }
.th-tip p { margin: 0 0 10px; font-size: 14px; color: var(--chalk); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) { .th-spin, .th-pulse { animation: none; } }