/* styles/app/12-twin.css — ISOLATED visuals for the experimental "쌍둥이(Twin)" prototype (dev-only, ?twin=1).
   EASY DELETE: remove this file + its <link> in index.html + game/twinMode.js + its import in main.js. */

.twinLayer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.twinLayer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* the "빛나는 실" linking the two twins */
.twinThread {
  stroke: #7dffc0; stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 2 11; filter: drop-shadow(0 0 6px rgba(125,255,192,.85));
  animation: twinFlow 1.1s linear infinite;
}
@keyframes twinFlow { to { stroke-dashoffset: -13; } }

/* soft aura around each twin region's bounding box */
.twinAura {
  position: absolute; border-radius: 16%;
  border: 2.5px solid rgba(125,255,192,.92);
  box-shadow: 0 0 12px rgba(125,255,192,.65), inset 0 0 10px rgba(125,255,192,.35);
}
/* the partner PULSES the instant one side is filled correctly — the "it answers there" payoff cue */
.twinAura.solved { animation: twinPulse .85s ease-in-out infinite; }
@keyframes twinPulse {
  0%,100% { box-shadow: 0 0 12px rgba(125,255,192,.65), inset 0 0 10px rgba(125,255,192,.35); }
  50%     { box-shadow: 0 0 28px rgba(125,255,192,1),   inset 0 0 14px rgba(125,255,192,.6); }
}

html[data-motion="reduced"] .twinThread { animation: none; }
html[data-motion="reduced"] .twinAura.solved { animation: none; }