/* ============================================================
   Mascot — Pixel creature (bottom-right corner)
   Built with CSS box-shadow pixel art technique
   ============================================================ */

#mascot-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.3s ease;
}

#mascot-container:hover {
  transform: scale(1.1);
}

/* The pixel art base element (1px rendered, scaled up) */
#mascot-pixel {
  width: 1px;
  height: 1px;
  transform: scale(3);
  transform-origin: top left;
  image-rendering: pixelated;
  position: relative;
}

/* ── Idle Sprite ──
   12×16 pixel creature (little robot/alien)
   Rendered via box-shadow: Xpx Ypx 0 <color>
   Coordinates are 0-indexed from top-left */
.mascot-idle #mascot-pixel {
  box-shadow:
    /* Head outline (row 0-4) */
    4px 0 0 var(--mascot-outline, #222), 5px 0 0 var(--mascot-outline, #222), 6px 0 0 var(--mascot-outline, #222), 7px 0 0 var(--mascot-outline, #222),
    3px 1px 0 var(--mascot-outline, #222), 8px 1px 0 var(--mascot-outline, #222),
    4px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 2px 0 var(--mascot-outline, #222), 8px 2px 0 var(--mascot-outline, #222),
    4px 2px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 2px 0 #fff, 6px 2px 0 #fff, 7px 2px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 3px 0 var(--mascot-outline, #222), 8px 3px 0 var(--mascot-outline, #222),
    4px 3px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 3px 0 #111, 6px 3px 0 #111, 7px 3px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 4px 0 var(--mascot-outline, #222), 8px 4px 0 var(--mascot-outline, #222),
    4px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    4px 5px 0 var(--mascot-outline, #222), 5px 5px 0 var(--mascot-outline, #222), 6px 5px 0 var(--mascot-outline, #222), 7px 5px 0 var(--mascot-outline, #222),
    /* Antenna */
    5px -1px 0 var(--mascot-outline, #222), 6px -1px 0 var(--mascot-outline, #222),
    5px -2px 0 var(--mascot-accent, #ffb800),
    /* Body (rows 6-11) */
    3px 6px 0 var(--mascot-outline, #222), 8px 6px 0 var(--mascot-outline, #222),
    4px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    2px 7px 0 var(--mascot-outline, #222), 9px 7px 0 var(--mascot-outline, #222),
    3px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)), 4px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 7px 0 var(--mascot-belly, #ccc), 6px 7px 0 var(--mascot-belly, #ccc), 7px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    2px 8px 0 var(--mascot-outline, #222), 9px 8px 0 var(--mascot-outline, #222),
    3px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)), 4px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 8px 0 var(--mascot-belly, #ccc), 6px 8px 0 var(--mascot-belly, #ccc), 7px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    2px 9px 0 var(--mascot-outline, #222), 9px 9px 0 var(--mascot-outline, #222),
    3px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 4px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 10px 0 var(--mascot-outline, #222), 8px 10px 0 var(--mascot-outline, #222),
    4px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    /* Legs (rows 11-13) */
    3px 11px 0 var(--mascot-outline, #222), 4px 11px 0 var(--mascot-outline, #222), 7px 11px 0 var(--mascot-outline, #222), 8px 11px 0 var(--mascot-outline, #222),
    3px 12px 0 var(--mascot-outline, #222), 4px 12px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 12px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 12px 0 var(--mascot-outline, #222),
    3px 13px 0 var(--mascot-outline, #222), 4px 13px 0 var(--mascot-outline, #222), 7px 13px 0 var(--mascot-outline, #222), 8px 13px 0 var(--mascot-outline, #222);
}

/* ── Blink State (eyes closed) ── */
.mascot-blink #mascot-pixel {
  box-shadow:
    4px 0 0 var(--mascot-outline, #222), 5px 0 0 var(--mascot-outline, #222), 6px 0 0 var(--mascot-outline, #222), 7px 0 0 var(--mascot-outline, #222),
    3px 1px 0 var(--mascot-outline, #222), 8px 1px 0 var(--mascot-outline, #222),
    4px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 2px 0 var(--mascot-outline, #222), 8px 2px 0 var(--mascot-outline, #222),
    4px 2px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 2px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 2px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 2px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 3px 0 var(--mascot-outline, #222), 8px 3px 0 var(--mascot-outline, #222),
    /* Closed eyes: horizontal line instead of dots */
    4px 3px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 3px 0 #666, 6px 3px 0 #666, 7px 3px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 4px 0 var(--mascot-outline, #222), 8px 4px 0 var(--mascot-outline, #222),
    4px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    4px 5px 0 var(--mascot-outline, #222), 5px 5px 0 var(--mascot-outline, #222), 6px 5px 0 var(--mascot-outline, #222), 7px 5px 0 var(--mascot-outline, #222),
    5px -1px 0 var(--mascot-outline, #222), 6px -1px 0 var(--mascot-outline, #222),
    5px -2px 0 var(--mascot-accent, #ffb800),
    3px 6px 0 var(--mascot-outline, #222), 8px 6px 0 var(--mascot-outline, #222),
    4px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    2px 7px 0 var(--mascot-outline, #222), 9px 7px 0 var(--mascot-outline, #222),
    3px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)), 4px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 7px 0 var(--mascot-belly, #ccc), 6px 7px 0 var(--mascot-belly, #ccc), 7px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    2px 8px 0 var(--mascot-outline, #222), 9px 8px 0 var(--mascot-outline, #222),
    3px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)), 4px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 8px 0 var(--mascot-belly, #ccc), 6px 8px 0 var(--mascot-belly, #ccc), 7px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    2px 9px 0 var(--mascot-outline, #222), 9px 9px 0 var(--mascot-outline, #222),
    3px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 4px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 10px 0 var(--mascot-outline, #222), 8px 10px 0 var(--mascot-outline, #222),
    4px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 11px 0 var(--mascot-outline, #222), 4px 11px 0 var(--mascot-outline, #222), 7px 11px 0 var(--mascot-outline, #222), 8px 11px 0 var(--mascot-outline, #222),
    3px 12px 0 var(--mascot-outline, #222), 4px 12px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 12px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 12px 0 var(--mascot-outline, #222),
    3px 13px 0 var(--mascot-outline, #222), 4px 13px 0 var(--mascot-outline, #222), 7px 13px 0 var(--mascot-outline, #222), 8px 13px 0 var(--mascot-outline, #222);
}

/* ── Animations ── */
@keyframes mascotBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes mascotBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-4px); }
  75% { transform: translateY(-2px); }
}

@keyframes mascotJump {
  0% { transform: translateY(0); }
  40% { transform: translateY(-16px); }
  100% { transform: translateY(0); }
}

@keyframes mascotSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes mascotWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

@keyframes mascotRunOff {
  0% { transform: translateX(0) scaleX(1); opacity: 1; }
  100% { transform: translateX(120px) scaleX(1); opacity: 0; }
}

@keyframes mascotPeekBack {
  0% { transform: translateX(80px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* State animation classes */
.mascot-idle #mascot-container-inner {
  animation: mascotBreathe 3s ease-in-out infinite;
}

.mascot-excited #mascot-container-inner {
  animation: mascotBounce 0.6s ease-in-out infinite;
}

.mascot-jump #mascot-container-inner {
  animation: mascotJump 0.5s ease-out;
}

.mascot-spin #mascot-container-inner {
  animation: mascotSpin 0.8s ease-in-out;
}

.mascot-wave #mascot-container-inner {
  animation: mascotWave 1s ease-in-out;
}

/* ── Scared State (jumpscare integration) ── */
.mascot-scared #mascot-container-inner {
  animation: mascotRunOff 0.5s ease-in forwards;
}

.mascot-peek #mascot-container-inner {
  animation: mascotPeekBack 0.8s ease-out forwards;
}

/* Wide eyes for scared state */
.mascot-scared #mascot-pixel {
  box-shadow:
    4px 0 0 var(--mascot-outline, #222), 5px 0 0 var(--mascot-outline, #222), 6px 0 0 var(--mascot-outline, #222), 7px 0 0 var(--mascot-outline, #222),
    3px 1px 0 var(--mascot-outline, #222), 8px 1px 0 var(--mascot-outline, #222),
    4px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 1px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 2px 0 var(--mascot-outline, #222), 8px 2px 0 var(--mascot-outline, #222),
    /* Wide eyes */
    4px 2px 0 #fff, 5px 2px 0 #fff, 6px 2px 0 #fff, 7px 2px 0 #fff,
    3px 3px 0 var(--mascot-outline, #222), 8px 3px 0 var(--mascot-outline, #222),
    4px 3px 0 #fff, 5px 3px 0 #111, 6px 3px 0 #111, 7px 3px 0 #fff,
    3px 4px 0 var(--mascot-outline, #222), 8px 4px 0 var(--mascot-outline, #222),
    /* Open mouth */
    4px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 4px 0 #333, 6px 4px 0 #333, 7px 4px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    4px 5px 0 var(--mascot-outline, #222), 5px 5px 0 var(--mascot-outline, #222), 6px 5px 0 var(--mascot-outline, #222), 7px 5px 0 var(--mascot-outline, #222),
    5px -1px 0 var(--mascot-outline, #222), 6px -1px 0 var(--mascot-outline, #222),
    5px -2px 0 #ff2d7b,
    3px 6px 0 var(--mascot-outline, #222), 8px 6px 0 var(--mascot-outline, #222),
    4px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 6px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    2px 7px 0 var(--mascot-outline, #222), 9px 7px 0 var(--mascot-outline, #222),
    3px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)), 4px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 7px 0 var(--mascot-belly, #ccc), 6px 7px 0 var(--mascot-belly, #ccc), 7px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 7px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    2px 8px 0 var(--mascot-outline, #222), 9px 8px 0 var(--mascot-outline, #222),
    3px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)), 4px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 8px 0 var(--mascot-belly, #ccc), 6px 8px 0 var(--mascot-belly, #ccc), 7px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 8px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    2px 9px 0 var(--mascot-outline, #222), 9px 9px 0 var(--mascot-outline, #222),
    3px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 4px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 9px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 10px 0 var(--mascot-outline, #222), 8px 10px 0 var(--mascot-outline, #222),
    4px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)), 5px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)), 6px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 10px 0 var(--mascot-body, var(--color-accent, #39ff14)),
    3px 11px 0 var(--mascot-outline, #222), 4px 11px 0 var(--mascot-outline, #222), 7px 11px 0 var(--mascot-outline, #222), 8px 11px 0 var(--mascot-outline, #222),
    3px 12px 0 var(--mascot-outline, #222), 4px 12px 0 var(--mascot-body, var(--color-accent, #39ff14)), 7px 12px 0 var(--mascot-body, var(--color-accent, #39ff14)), 8px 12px 0 var(--mascot-outline, #222),
    3px 13px 0 var(--mascot-outline, #222), 4px 13px 0 var(--mascot-outline, #222), 7px 13px 0 var(--mascot-outline, #222), 8px 13px 0 var(--mascot-outline, #222);
}

/* ── Weather Accessories (via pseudo-elements) ── */

/* Umbrella for rain */
.mascot-umbrella #mascot-container-inner::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 6px solid #00d4ff;
}

.mascot-umbrella #mascot-container-inner::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 12px;
  background: #888;
}

/* Sunglasses for hot+clear */
.mascot-sunglasses #mascot-container-inner::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  background: #333;
  border-radius: 1px;
  box-shadow:
    -4px 1px 0 #111, -3px 1px 0 #111, -2px 1px 0 #111,
    3px 1px 0 #111, 4px 1px 0 #111, 5px 1px 0 #111;
}

/* Scarf for cold */
.mascot-scarf #mascot-container-inner::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 3px;
  background: #ff2d7b;
  border-radius: 1px;
}

/* ── Sleepy droopy variant ── */
.mascot-sleepy #mascot-container-inner {
  animation: mascotBreathe 5s ease-in-out infinite;
}

/* ── Light theme adjustments ── */
[data-theme="light"] #mascot-container {
  --mascot-outline: #444;
}