/* DISTRACTIONS — visual overlays the task screen renders on a timer.
   Positioned across corners + edges so they don't all stack in one spot. */
.distraction{position:absolute;pointer-events:none;z-index:50;transition:opacity .3s}
.distraction.notif{top:16px;right:16px;background:var(--warm);border:1px solid var(--strip);padding:6px 10px;font-size:11px;color:var(--text2);display:flex;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(44,36,22,.08)}
.distraction.notif::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--terra);flex-shrink:0}
.distraction.word{bottom:30px;left:50%;transform:translateX(-50%);font-family:'Lora',serif;font-style:italic;font-size:.95rem;color:var(--text2);opacity:.55;letter-spacing:.05em}
.distraction.clock{bottom:20px;right:20px;font-size:10px;color:var(--text2);letter-spacing:.08em;opacity:.5}
.distraction.chat{bottom:50px;left:20px;background:var(--warm);border:1px solid var(--strip);padding:6px 10px;font-size:10px;color:var(--text2);max-width:140px}
.distraction.badge{top:50%;right:12px;transform:translateY(-50%)}
.distraction.badge span{display:inline-block;background:var(--terra);color:var(--warm);border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;animation:badgePulse 1.2s ease-in-out infinite}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}