/* Waiting Figure Component - Dark Theme, Responsive, CSS Mask-based Tinting */
.res-wait-card {
  --wf-ink: #E6ECF5;
  --wf-muted: #98A3B1;
  --wf-line: rgba(220, 225, 232, 0.16);
  --wf-accent: #F2C94C;
  --wf-accent-soft: rgba(242, 201, 76, 0.45);
  --wf-err: #FF8A80;
  --R: 30px;
  --T: 5s;
  width: 100%;
  position: relative;
  background: transparent;
  box-sizing: border-box;
  font-family: inherit;
  transition: opacity 0.3s, visibility 0s;
}

.res-wait-card.hidden {
  display: none !important;
  opacity: 0;
  visibility: hidden;
}

.res-wait-scenes {
  position: relative;
  height: calc(220px / 3);
  border-radius: 6px;
  overflow: hidden;
  background: transparent;
}

@media (max-width: 520px) {
  .res-wait-card {
    --R: 13px;
    --T: 6.5s;
  }
  .res-wait-scenes {
    height: 60px;
  }
}

@media (max-width: 360px) {
  .res-wait-card {
    --R: 8px;
  }
}

@media (max-width: 260px) {
  .res-wait-card {
    --R: 0px;
  }
}

.res-wait-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.res-wait-scene.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

.res-wait-fig {
  position: absolute;
  top: 0;
  left: 8px;
  height: 100%;
  aspect-ratio: var(--ar);
}

@media (max-width: 520px) {
  .res-wait-fig {
    left: 6px;
  }
}

.res-wait-patrol,
.res-wait-flip,
.res-wait-bob,
.res-wait-lay {
  position: absolute;
  inset: 0;
}

.res-wait-flip {
  transform: scaleX(-1);
}

.res-wait-lay {
  background: var(--wf-ink, #E6ECF5);
  -webkit-mask: var(--m) center/100% 100% no-repeat;
  mask: var(--m) center/100% 100% no-repeat;
}

/* Layer masks referencing extracted standalone .webp images */
.lay-walk-body { --m: url('/static/research/stick-walk-body.webp'); }
.lay-walk-legs-a { --m: url('/static/research/stick-walk-legs-a.webp'); }
.lay-walk-legs-b { --m: url('/static/research/stick-walk-legs-b.webp'); }

.lay-inspect-body { --m: url('/static/research/stick-inspect-body.webp'); }
.lay-inspect-legs-a { --m: url('/static/research/stick-inspect-legs-a.webp'); }
.lay-inspect-legs-b { --m: url('/static/research/stick-inspect-legs-b.webp'); }

.lay-notes-body { --m: url('/static/research/stick-notes-body.webp'); }
.lay-notes-pen { --m: url('/static/research/stick-notes-pen.webp'); }

.lay-idea-body { --m: url('/static/research/stick-idea-body.webp'); }
.lay-idea-rays { --m: url('/static/research/stick-idea-rays.webp'); }

.lay-done-body { --m: url('/static/research/stick-done-body.webp'); }
.lay-done-arrow { --m: url('/static/research/stick-done-arrow.webp'); }

.lay-error-body { --m: url('/static/research/stick-error-body.webp'); }

.res-wait-glow {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--wf-accent-soft) 0%, rgba(0, 0, 0, 0) 68%);
}

.res-wait-info {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 6px;
  align-content: start;
  padding-top: 8px;
}

.res-wait-msg {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--wf-ink, #E6ECF5);
  font-weight: 500;
  transition: opacity 0.3s ease;
}

.res-wait-msg.swap {
  opacity: 0;
}

.res-wait-card.is-error .res-wait-msg {
  color: var(--wf-err, #FF8A80);
}

.res-wait-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-meta);
  color: var(--wf-muted, #98A3B1);
  min-width: 0;
}

.res-wait-retry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 138, 128, 0.12);
  color: var(--wf-err, #FF8A80);
  border: 1px solid var(--wf-err, #FF8A80);
  border-radius: 5px;
  padding: 3px 10px;
  font-family: var(--font-ui);
  font-size: var(--fs-btn, var(--fs-label));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.res-wait-retry:hover {
  background: var(--wf-err, #FF8A80);
  color: #10151B;
}

.res-wait-retry[hidden] {
  display: none !important;
}

.res-wait-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.res-wait-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--wf-muted, #98A3B1);
  box-sizing: border-box;
  transition: background 0.2s, border-color 0.2s;
}

.res-wait-dots i.done {
  background: var(--wf-muted, #98A3B1);
  border-color: var(--wf-muted, #98A3B1);
}

.res-wait-dots i.cur {
  background: var(--wf-ink, #E6ECF5);
  border-color: var(--wf-ink, #E6ECF5);
}

/* Animations */
@keyframes wfPatrol {
  0% { transform: translateX(0) scaleX(1); }
  45% { transform: translateX(var(--R)) scaleX(1); }
  50% { transform: translateX(var(--R)) scaleX(-1); }
  95% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}

@keyframes wfStepBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes wfLegsA {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes wfLegsB {
  0%, 49.9% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes wfWrite {
  from { transform: rotate(-5deg); }
  to { transform: rotate(4deg); }
}

@keyframes wfIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes wfGlowPulse {
  from { transform: translate(-50%, -50%) scale(0.8); opacity: 0.45; }
  to { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

@keyframes wfRaysPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@keyframes wfNudge {
  from { transform: translateX(-4px); }
  to { transform: translateX(10px); }
}

.res-wait-scene.on .res-wait-patrol { animation: wfPatrol calc(var(--T) * 2) linear infinite; }
.res-wait-scene.on .res-wait-bob { animation: wfStepBob 0.6s ease-in-out infinite; }
.res-wait-scene.on .res-wait-legsA { animation: wfLegsA 0.6s linear infinite; }
.res-wait-scene.on .res-wait-legsB { animation: wfLegsB 0.6s linear infinite; }
.res-wait-scene.on .res-wait-piece { transform-origin: var(--px) var(--py); animation: wfWrite 0.45s ease-in-out infinite alternate; }
.res-wait-scene.on .res-wait-idle { position: absolute; inset: 0; animation: wfIdle 1.3s ease-in-out infinite; }
.res-wait-scene.on .res-wait-glow { animation: wfGlowPulse 0.9s ease-in-out infinite alternate; }
.res-wait-scene.on .res-wait-rays { animation: wfRaysPulse 0.9s ease-in-out infinite; }
.res-wait-scene.on .res-wait-arrow { animation: wfNudge 1.3s ease-in-out infinite alternate; }

.res-wait-card.paused .res-wait-scene * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .res-wait-scene *, .res-wait-msg {
    animation: none !important;
    transition: none !important;
  }
  .res-wait-scene, .res-wait-scene.on, .res-wait-card {
    transition: none !important;
  }
}