/* ════════════════════════════════════════
   PNT.OS life — pet, widgets, toasts, screensaver
════════════════════════════════════════ */

/* ── Icons feel touchable ─────────────── */
.desk-glyph { transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.35s; }
.desk-icon:hover .desk-glyph {
  transform: translateY(-4px) rotate(-5deg) scale(1.06);
  border-color: rgba(255,51,77,0.5);
  box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 18px rgba(255,51,77,0.25);
}
.desk-icon:active .desk-glyph { transform: scale(0.94); }

/* ── Widgets ──────────────────────────── */
.widgets {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 260px;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.8s ease 0.4s, transform 0.8s var(--ease-out) 0.4s;
}
.alive .widgets { opacity: 1; transform: none; }

.widget {
  padding: 16px 18px;
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  background: rgba(12,16,32,0.62);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.widget-greet { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.widget-time {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.2rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
.widget-date { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-dim); }
.widget-status {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-hi);
  font-size: 0.85rem;
  color: var(--text);
}

.sticky {
  align-self: flex-end;
  width: 170px;
  margin-top: 6px;
  padding: 18px 16px 20px;
  background: linear-gradient(170deg, #ffe58f, #ffd25e);
  color: #3b2a07;
  font-family: 'Caveat', cursive;
  font-size: 1.45rem;
  line-height: 1.15;
  text-align: left;
  border-radius: 2px 2px 14px 2px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.45);
  transform: rotate(-4deg);
  transition: transform 0.3s var(--ease-out);
  position: relative;
}
.sticky::before {
  content: '';
  position: absolute;
  top: -9px; left: 50%;
  width: 60px; height: 18px;
  background: rgba(255,255,255,0.35);
  transform: translateX(-50%) rotate(3deg);
}
.sticky:hover { transform: rotate(0deg) scale(1.05); }

@media (min-width: 721px) and (max-width: 1279px) {
  .widgets { display: none; }
}
@media (max-width: 720px) {
  .widgets { position: relative; top: auto; right: auto; margin: 20px auto 80px; width: min(300px, calc(100% - 32px)); flex-shrink: 0; }
  .sticky { align-self: center; }
}

/* ── Notifications ────────────────────── */
.toasts {
  position: fixed;
  bottom: 60px;
  right: 16px;
  z-index: 7000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: min(340px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  background: rgba(14,18,34,0.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  text-align: left;
  pointer-events: auto;
  animation: toast-in 0.5s var(--ease-out);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
button.toast { cursor: pointer; }
button.toast:hover { border-color: var(--red); }
.toast.out { opacity: 0; transform: translateX(30px); }
@keyframes toast-in { from { opacity: 0; transform: translateX(60px) scale(0.96); } }
.toast-icon { font-size: 1.4rem; line-height: 1.2; }
.toast-text { display: flex; flex-direction: column; gap: 2px; }
.toast-text b { font-size: 0.88rem; color: #fff; font-weight: 600; }
.toast-text span { font-size: 0.8rem; color: var(--text-muted); }

/* ── Byte the robot ───────────────────── */
.pet {
  position: absolute;
  left: 0;
  bottom: 2px;
  z-index: 3500;
  width: 56px;
  height: 56px;
  cursor: pointer;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.5));
  animation: pet-in 0.6s var(--ease-out);
}
@keyframes pet-in { from { opacity: 0; } }
.pet-sprite { display: block; overflow: visible; }
.pet-sprite rect { transform-box: fill-box; transform-origin: center; }

.p-eyes { transform-box: fill-box; transform-origin: center; animation: pet-blink 4.5s infinite; }
@keyframes pet-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.15); } }
.p-led { animation: led 1.6s steps(1) infinite; }
@keyframes led { 50% { fill: #5a1a24; } }
.p-core { animation: live 1.4s ease-in-out infinite; }
@keyframes live { 50% { opacity: 0.35; } }

.walking .pet-sprite { animation: bob 0.36s steps(2) infinite; }
.walking .p-leg-l { animation: step 0.36s steps(1) infinite; }
.walking .p-leg-r { animation: step 0.36s steps(1) infinite 0.18s; }
.walking .p-arm-l { animation: step 0.36s steps(1) infinite 0.18s; }
.walking .p-arm-r { animation: step 0.36s steps(1) infinite; }
@keyframes bob  { 50% { translate: 0 -2px; } }
@keyframes step { 50% { transform: translateY(-1px); } }

.sleeping .p-eyes { animation: none; transform: scaleY(0.2); }
.sleeping .p-mouth { opacity: 0.25; }
.pet-zzz {
  position: absolute;
  top: -10px;
  left: 40px;
  display: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.pet-zzz i { font-style: normal; font-size: 0.7em; margin-left: 2px; }
.sleeping .pet-zzz { display: block; animation: zzz 2.4s ease-in-out infinite; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px); } }

.pet.jump .pet-sprite { animation: jump 0.5s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes jump { 0% { translate: 0 0; } 40% { translate: 0 -22px; } 100% { translate: 0 0; } }

.pet-bubble {
  position: absolute;
  bottom: 66px;
  left: 12px;
  width: max-content;
  max-width: 230px;
  padding: 9px 12px;
  border: 1px solid var(--border-hi);
  border-radius: 12px 12px 12px 3px;
  background: #f4f6fb;
  color: #11162a;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
  animation: bubble 0.3s var(--ease-out);
}
.pet-bubble.left { left: auto; right: 10px; border-radius: 12px 12px 3px 12px; }
.pet-bubble code { font-family: var(--font-mono); font-size: 0.9em; color: var(--red); }
@keyframes bubble { from { opacity: 0; transform: translateY(6px) scale(0.9); } }

/* ── Screensaver ──────────────────────── */
.screensaver {
  position: absolute;
  inset: 0;
  z-index: 4600;
  background: rgba(4,6,12,0.88);
  backdrop-filter: blur(6px);
  animation: pet-in 1s ease;
}
.saver-logo {
  position: absolute;
  top: 0; left: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6rem);
  color: #fff;
  will-change: transform;
}
.saver-logo i { font-style: normal; color: var(--dot, var(--red)); transition: color 0.3s; }
.saver-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* ── Byte: picked up / running ────────── */
.pet { touch-action: none; }
.pet.held { cursor: grabbing; }
.held .pet-sprite { animation: dangle 0.5s ease-in-out infinite alternate; transform-origin: 50% 0; }
.held .p-leg-l, .held .p-leg-r { animation: step 0.18s steps(1) infinite; }
.held .p-arm-l, .held .p-arm-r { transform: translateY(-2px); }
@keyframes dangle { from { rotate: -10deg; } to { rotate: 10deg; } }
.running .pet-sprite { animation-duration: 0.2s; }
.running .p-leg-l, .running .p-leg-r, .running .p-arm-l, .running .p-arm-r { animation-duration: 0.2s; }
.p-eyes { transition: translate 0.15s ease; }

/* ── Null the drone ───────────────────── */
.drone {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 42px;
  cursor: pointer;
  filter: drop-shadow(0 10px 8px rgba(0,0,0,0.4));
}
.drone-sprite { display: block; overflow: visible; animation: hover 1.8s ease-in-out infinite; }
.drone-sprite rect { transform-box: fill-box; transform-origin: center; }
@keyframes hover { 50% { translate: 0 -4px; } }
.d-prop { animation: prop 0.12s steps(2) infinite; }
@keyframes prop { 50% { transform: scaleX(0.25); } }
.d-eye { animation: scan 3.2s ease-in-out infinite; }
@keyframes scan { 0%, 100% { translate: -2px 0; } 50% { translate: 2px 0; } }
.d-light { animation: led 1.2s steps(1) infinite; }
.d-thrust { animation: live 0.6s ease-in-out infinite; }
.drone.flying .drone-sprite { rotate: 8deg; }
.drone.spin .drone-sprite { animation: drone-spin 0.6s ease-in-out, hover 1.8s ease-in-out infinite; }
@keyframes drone-spin { from { rotate: 0deg; } to { rotate: 360deg; } }
.drone .pet-bubble { bottom: 50px; }
.drone-hearts { position: absolute; left: 14px; top: -6px; pointer-events: none; }
.drone-hearts i {
  position: absolute;
  font-style: normal;
  color: #38bdf8;
  font-size: 0.9rem;
  animation: heart 1.3s ease-out forwards;
}
.drone-hearts i:nth-child(2) { left: 12px; animation-delay: 0.15s; }
.drone-hearts i:nth-child(3) { left: -8px; animation-delay: 0.3s; }
@keyframes heart { from { opacity: 1; transform: translateY(0) scale(0.6); } to { opacity: 0; transform: translateY(-34px) scale(1.2); } }

/* ── Bugs ─────────────────────────────── */
.bug {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3400;
  width: 26px;
  height: 26px;
  cursor: crosshair;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}
.bug svg { display: block; }
.b-legs-a { animation: legs-a 0.22s steps(1) infinite; }
.b-legs-b { animation: legs-b 0.22s steps(1) infinite; }
@keyframes legs-a { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes legs-b { 0% { opacity: 0; } 50% { opacity: 1; } }
.bug.splat svg { display: none; }
.bug.splat::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, #a3e635 0 35%, rgba(163,230,53,0.4) 36% 60%, transparent 62%);
  animation: splat 0.9s ease-out forwards;
}
@keyframes splat { from { transform: scale(0.4); } 30% { transform: scale(1.3); } to { transform: scale(1.1); opacity: 0; } }

.bug-count {
  padding: 5px 10px;
  border: 1px solid rgba(163,230,53,0.35);
  border-radius: 4px;
  color: #a3e635;
  white-space: nowrap;
  animation: toast-in 0.4s var(--ease-out);
}

/* ── Weather ──────────────────────────── */
.widget-weather { margin-top: 4px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.precip {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (max-width: 720px) {
  /* Windows fill the screen on phones: keep Byte, Null and bugs behind them */
  .pet, .bug, .drone { z-index: 5 !important; }
  .toasts { bottom: 56px; right: 10px; width: calc(100vw - 20px); }
  .toast { padding: 10px 12px; gap: 10px; }
  .toast-icon { font-size: 1.1rem; }
  .toast-text b { font-size: 0.8rem; }
  .toast-text span { font-size: 0.74rem; }
  .toast:nth-last-child(n+3) { display: none; }
}