/* Fullscreen layout */
html, body { height: 100%; margin: 0; padding: 0; }
#ilaf-root.ilaf-fullscreen {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
  color: white;
  background: black;
  z-index: 0;
  --ilaf-breath-duration: 6s;
  --ilaf-breath-name: ilafBreathUnified;
}

/* Background layers */
.ilaf-bg-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-size: cover;
  opacity: 0.0;
  transition: opacity 0.6s ease-in-out;
}
.ilaf-bg-a,
.ilaf-bg-b {
  z-index: 1 !important;
}

.ilaf-bg-a { opacity: 1.0; } /* default start */

/* Credit */
.ilaf-credit {
  position: absolute;
  bottom: 1rem; left: 1rem; right: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 3;
  font-size: 0.85rem;
  opacity: 0.9;
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
}

.ilaf-credit-photo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ilaf-credit-location {
  font-size: 0.75rem;
  opacity: 0.85;
}

/* Letters UI */
.ilaf-letter-ui {
  position: absolute;
  bottom: 3.5rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  z-index: 6;
}

.ilaf-action-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ilaf-letter-icon,
.ilaf-letter-compose,
.ilaf-letter-close,
.ilaf-letter-cancel,
.ilaf-letter-send,
.ilaf-letter-attach-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
}

.ilaf-letter-icon {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  position: relative;
}

.ilaf-icon-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  line-height: 1;
  flex: 0 0 auto;
}

.ilaf-icon-host .bi {
  font-size: 1em;
  line-height: 1;
}

.ilaf-icon-host .ilaf-noun-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ilaf-icon-light .ilaf-noun-icon {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.ilaf-letter-icon .ilaf-icon-host,
.ilaf-letter-compose .ilaf-icon-host,
.ilaf-watch-plex-button .ilaf-icon-host,
.ilaf-radio-button .ilaf-icon-host {
  font-size: 0.95rem;
}

.ilaf-letter-count {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ff8c42;
  color: #0b0b0b;
  font-weight: 700;
  font-size: 0.75rem;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ilaf-letter-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

/* Help overlay (touch-friendly) */
.ilaf-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.4rem;
}

.ilaf-help-title {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ilaf-help-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.ilaf-help-version {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  color: #9fb4c3;
  white-space: nowrap;
}

.ilaf-help-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
}

.ilaf-help-close:hover {
  border-color: rgba(128,255,234,0.7);
}

.ilaf-help-subtitle {
  margin: 0 0 1.2rem;
  color: #c9d6dd;
  font-size: 0.95rem;
}

.ilaf-help-section {
  margin-bottom: 1.4rem;
}

.ilaf-help-section-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: #9fb4c3;
  margin: 0 0 0.4rem;
}

.ilaf-help-note {
  margin: 0 0 0.7rem;
  color: #9fb4c3;
  font-size: 0.86rem;
}

.ilaf-help-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.6rem;
}

.ilaf-help-grid.ilaf-help-grid-single {
  grid-template-columns: minmax(130px, 170px);
  justify-content: start;
}

@media (min-width: 1400px) {
  .ilaf-help-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.ilaf-help-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 92px;
  padding: 0.6rem 0.4rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(0,0,0,0.45);
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  touch-action: manipulation;
}

.ilaf-help-button:hover {
  border-color: rgba(128,255,234,0.6);
  background: rgba(12,18,22,0.7);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}

.ilaf-help-button:active {
  transform: scale(0.98);
}

.ilaf-help-button:focus-visible {
  outline: 2px solid #80ffea;
  outline-offset: 2px;
}

.ilaf-help-button .bi {
  font-size: 1.35rem;
  color: #80ffea;
}

.ilaf-help-keycap {
  font-family: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  font-size: 0.85rem;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.12);
}

.ilaf-help-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.ilaf-help-list {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 16px;
  align-items: start;
  font-size: 1rem;
  line-height: 1.35;
}

.ilaf-help-key {
  color: #80ffea;
  text-align: right;
  font-weight: 600;
}

.ilaf-watch-plex-button {
  white-space: nowrap;
}

.ilaf-radio-button {
  white-space: nowrap;
}

.ilaf-radio-playing {
  border-color: rgba(120, 255, 220, 0.7);
  box-shadow: 0 0 10px rgba(120, 255, 220, 0.25);
}

.ilaf-frame-toast {
  position: absolute;
  left: 1rem;
  bottom: 8.9rem;
  max-width: min(520px, 80vw);
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 200, 140, 0.6);
  background: rgba(20, 12, 6, 0.85);
  color: #ffd9b0;
  font-size: 0.85rem;
  line-height: 1.35;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 70;
  pointer-events: none;
}

.ilaf-frame-toast.ilaf-visible {
  opacity: 1;
  transform: translateY(0);
}

.ilaf-plex-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.85);
  z-index: 65;
}

.ilaf-plex-shell {
  width: min(96vw, 1800px);
  height: min(92vh, 980px);
  background: rgba(6, 8, 10, 0.97);
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 10px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ilaf-plex-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  background: rgba(0,0,0,0.72);
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.ilaf-plex-title {
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.92;
}

.ilaf-plex-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.ilaf-plex-refresh,
.ilaf-plex-fullscreen,
.ilaf-plex-close {
  white-space: nowrap;
}

.ilaf-plex-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #000;
}

.ilaf-letter-card {
  width: min(720px, 88vw);
  max-height: 80vh;
  overflow: auto;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 1.5rem;
  color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

.ilaf-letter-header {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.ilaf-letter-error {
  color: #ffb3b3;
  font-size: 0.9rem;
  margin: 0.1rem 0 0.5rem;
  min-height: 1rem;
}

.ilaf-letter-meta {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 1rem;
}

.ilaf-letter-body {
  white-space: pre-wrap;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

.ilaf-letter-read-controls {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ilaf-letter-read-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.3;
  max-width: 520px;
}

.ilaf-letter-read-toggle input {
  margin-top: 0.2rem;
}

.ilaf-letter-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.ilaf-letter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
}

.ilaf-letter-field input,
.ilaf-letter-field textarea,
.ilaf-letter-field select {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 6px;
  color: #fff;
  padding: 0.5rem 0.6rem;
  font-size: 0.95rem;
}

.ilaf-letter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1rem;
}
.ilaf-letter-compose-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.ilaf-letter-attachments-compose {
  flex: 1 1 45%;
  min-width: 220px;
}
.ilaf-letter-attach-label {
  font-size: 0.85rem;
  opacity: 0.8;
  margin-bottom: 0.35rem;
}
.ilaf-letter-attach-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ilaf-letter-attach-empty {
  font-size: 0.85rem;
  opacity: 0.7;
}
.ilaf-letter-attach-chip {
  position: relative;
  width: 82px;
  height: 62px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.ilaf-letter-attach-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ilaf-letter-attach-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.65);
  color: #fff;
  cursor: pointer;
  line-height: 1;
}
.ilaf-button-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ilaf-letter-camera {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  background: rgba(0,0,0,0.45);
}
.ilaf-letter-camera-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  border-radius: 8px;
  overflow: hidden;
  min-height: 180px;
}
.ilaf-letter-camera-preview video,
.ilaf-letter-camera-still {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
}
.ilaf-hidden {
  display: none !important;
}
.ilaf-letter-camera-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 0.6rem;
}
.ilaf-letter-attachments-read {
  margin-top: 0.75rem;
}
.ilaf-letter-attach-read-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.ilaf-letter-attach-thumb {
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
}
.ilaf-letter-attach-thumb img {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
}
.ilaf-letter-lightbox {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}
.ilaf-letter-lightbox img {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}
.ilaf-letter-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.3rem;
  cursor: pointer;
}

/* Hide reCAPTCHA badge by default; reveal only while composing a letter */
.grecaptcha-badge {
  display: none !important;
}
body.ilaf-recaptcha-visible .grecaptcha-badge {
  display: block !important;
}

/* Moon icon */
.ilaf-moon {
  position: absolute;
  top: 3vh;
  right: 3vw;
  font-size: 2.8rem;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 4px 10px rgba(0, 0, 0, 0.6);
  opacity: 0.92;
  transition: transform 0.6s ease, color 1s ease, text-shadow 1s ease;
  z-index: 5 !important;
}
.ilaf-moon:hover { transform: scale(1.1) rotate(5deg); }
.ilaf-moon svg { pointer-events: none; position: relative; }

.ilaf-moon-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9;
  width: 60px;
  height: 60px;
}

.ilaf-moon-label {
  position: absolute;
  top: 62px;
  right: -6px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.7);
  color: #f8f8f8;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  font-size: 0.9rem;
  letter-spacing: 0.4px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  z-index: 11;
}

.ilaf-moon-label.ilaf-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Aurora alert - Wonder Layer Item
   We render this inside the Time block (bottom-center), under the date.
   That way when the alert appears, it takes up real layout space and gently pushes
   the clock/date upward instead of floating over other UI. */

.ilaf-aurora-slot {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  max-height: 0;
  opacity: 0;
  overflow: visible;
  padding: 0.4rem 0.2rem;
  transition: max-height 260ms ease, opacity 260ms ease;
}

.ilaf-aurora-slot.ilaf-visible {
  /* A safe max-height so the slot can animate "open" without knowing exact content height. */
  max-height: 12rem;
  opacity: 1;
}

.ilaf-aurora-text,
.ilaf-meteor-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.82rem 1.32rem;
  line-height: 1.1;
  min-height: 0;
  border-radius: 0.82rem;
  position: relative;
  z-index: 0;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

.ilaf-aurora-text {
  background: rgba(0,0,0,0.55);
  color: #80ffea;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  box-shadow: 0 0 0.9rem rgba(0,255,255,0.38);
  isolation: isolate;
}

.ilaf-aurora-text:focus-visible {
  outline: 2px solid rgba(128, 255, 234, 0.9);
  outline-offset: 3px;
}

.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-aurora-text {
  animation: var(--ilaf-breath-name, ilafBreathUnified) var(--ilaf-breath-duration, 6s) ease-in-out infinite, auroraPulse var(--ilaf-breath-duration, 6s) ease-in-out infinite;
}

/* Aurora badge border glow (only when visible)
   Keeps the text/background the same, but adds a slow-moving aurora ring around the edges. */
.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-aurora-text::before,
.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-aurora-text::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  pointer-events: none;
}

.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-aurora-text::before {
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    rgba(0, 255, 200, 0.90),
    rgba(70, 220, 255, 0.70),
    rgba(160, 120, 255, 0.75),
    rgba(255, 120, 200, 0.55),
    rgba(90, 255, 120, 0.70),
    rgba(0, 255, 200, 0.90)
  );
  opacity: 0.85;

  /* Show only a ring (border), not a filled rectangle. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  animation: ilafAuroraBadgeRing 18s linear infinite;
}

.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-aurora-text::after {
  inset: -8px;
  background: conic-gradient(
    from 0deg,
    rgba(0, 255, 200, 0.35),
    rgba(70, 220, 255, 0.28),
    rgba(160, 120, 255, 0.30),
    rgba(255, 120, 200, 0.22),
    rgba(90, 255, 120, 0.28),
    rgba(0, 255, 200, 0.35)
  );
  filter: blur(10px) saturate(1.6);
  opacity: 0.35;
  animation: ilafAuroraBadgeRing 18s linear infinite;
}

.ilaf-meteor-text {
  background: rgba(0,0,0,0.6);
  color: #e0e0e0;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.08rem;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 0 0.9rem rgba(185,185,185,0.36);
}

.ilaf-meteor-text::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(215,215,215,0.32);
  box-shadow: 0 0 14px rgba(215,215,215,0.28);
  pointer-events: none;
  opacity: 0.85;
}

.ilaf-meteor-headline {
  font-size: 1rem;
  color: #dcdcdc;
  text-align: center;
}

.ilaf-meteor-name {
  font-size: 0.95rem;
  color: #f5f5f5;
  opacity: 0.9;
  letter-spacing: 0.06rem;
  text-align: center;
  margin-top: 0.12rem;
}

.ilaf-meteor-text:focus-visible {
  outline: 2px solid rgba(220,220,220,0.85);
  outline-offset: 3px;
}

.ilaf-meteor-text.ilaf-meteor-off {
  opacity: 0.78;
  box-shadow: 0 0 6px rgba(160,160,160,0.2);
}

.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-meteor-text {
  animation: var(--ilaf-breath-name, ilafBreathUnified) var(--ilaf-breath-duration, 6s) ease-in-out infinite, meteorPulse var(--ilaf-breath-duration, 6s) ease-in-out infinite;
}

.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-meteor-text::before,
.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-meteor-text::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-meteor-text::before {
  inset: -0.3rem;
  padding: 0.16rem;
  background: conic-gradient(
    from 0deg,
    rgba(235,235,235,0.42),
    rgba(200,200,200,0.32),
    rgba(160,160,160,0.28),
    rgba(200,200,200,0.32),
    rgba(235,235,235,0.42)
  );
  opacity: 0.6;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: meteorRing 16s linear infinite;
}

.ilaf-breath-enabled .ilaf-aurora-slot.ilaf-visible .ilaf-meteor-text::after {
  inset: -0.55rem;
  background: radial-gradient(60% 60% at 50% 50%, rgba(230,230,230,0.3), rgba(0,0,0,0));
  filter: blur(10px);
  opacity: 0.35;
  animation: meteorRing 20s linear infinite reverse;
}

@keyframes meteorPulse {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0.9rem rgba(185,185,185,0.34); }
  50% { transform: translateY(-0.12rem) scale(1.06); box-shadow: 0 0 1.25rem rgba(215,215,215,0.48); }
}

@keyframes meteorRing {
  0%   { transform: none; }
  100% { transform: none; }
}

#ilaf-meteor-tip {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #e6e6e6;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  font-size: 1rem;
  letter-spacing: 0.3px;
  text-align: center;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 18;
  max-width: min(90vw, 620px);
}

#ilaf-meteor-tip.ilaf-visible {
  opacity: 1;
}

/* Companion breathing */
.ilaf-companion-wrap {
  transform-origin: center;
}

.ilaf-companion-label {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  min-width: 132px;
  max-width: 186px;
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(16, 20, 28, 0.66);
  color: #f6efdc;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  font-family: inherit;
  box-sizing: border-box;
  touch-action: manipulation;
  pointer-events: auto;
  z-index: 19;
}

@media (pointer: coarse) {
  .ilaf-companion-label {
    min-height: 34px;
    padding: 7px 14px;
  }
}

.ilaf-companion-label:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 1px;
}

.ilaf-companion-label.ilaf-disabled {
  cursor: default;
  opacity: 0.9;
}

.ilaf-companion-name-label {
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  display: inline-block;
  width: max-content;
  max-width: 164px;
  min-width: 0;
  padding: 1px 7px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(23, 32, 47, 0.56);
  color: #fff4dc;
  font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", "Snell Roundhand", cursive;
  font-size: 1.14rem;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  box-sizing: border-box;
  touch-action: manipulation;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 19;
}

.ilaf-companion-name-label.ilaf-visible {
  opacity: 1;
  pointer-events: auto;
}

.ilaf-companion-name-label:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 1px;
}

.ilaf-companion-name-label[data-companion-id="wolf"] {
  font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", "Snell Roundhand", cursive;
}

.ilaf-companion-name-label[data-companion-id="racerunner"] {
  font-family: "Bradley Hand", "Segoe Print", "Comic Sans MS", "Trebuchet MS", cursive;
}

.ilaf-companion-name-label[data-companion-id="monarch"] {
  font-family: "Lucida Handwriting", "Apple Chancery", "URW Chancery L", "Brush Script MT", cursive;
}

.ilaf-companion-name-label[data-companion-id="hare"] {
  font-family: "Palatino Linotype", "Book Antiqua", "Garamond", "Times New Roman", serif;
  font-style: italic;
}

.ilaf-companion-name-label[data-companion-id="turtle"] {
  font-family: "Copperplate", "Papyrus", "Palatino Linotype", "Book Antiqua", serif;
  font-style: italic;
}

.ilaf-companion-label[data-companion-id="wolf"] {
  color: #f6e7c2;
}

.ilaf-companion-label[data-companion-id="racerunner"] {
  color: #d9f7b1;
}

.ilaf-companion-label[data-companion-id="monarch"] {
  color: #ffd9a3;
}

.ilaf-companion-label[data-companion-id="hare"] {
  color: #f3ead8;
}

.ilaf-companion-label[data-companion-id="turtle"] {
  color: #c6f2cb;
}
.ilaf-breath-enabled .ilaf-companion-wrap {
  animation: var(--ilaf-breath-name, ilafBreathUnified) var(--ilaf-breath-duration, 6s) ease-in-out infinite;
}

.ilaf-companion-switch-btn {
  position: absolute;
  left: -38px;   /* +40px total hit area to the left */
  bottom: -38px; /* +40px total hit area upward */
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: none;
  background: transparent;
  padding: 0;
  color: #fff;
  display: block;
  cursor: pointer;
  opacity: 0.7;
  z-index: 22;
  touch-action: manipulation;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 140ms ease, transform 140ms ease;
}

.ilaf-companion-switch-btn::before {
  content: '';
  position: absolute;
  left: 48px;
  bottom: 48px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(0, 0, 0, 0.62);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 0;
}

.ilaf-companion-switch-btn .bi {
  position: absolute;
  left: 68px;
  top: 28px;
  transform: translate(-50%, -50%);
  font-size: 1.05rem;
  pointer-events: none;
  z-index: 1;
}

.ilaf-companion-switch-btn:hover,
.ilaf-companion-switch-btn:focus-visible,
.ilaf-companion-switch-btn:active {
  opacity: 1;
}

.ilaf-companion-switch-btn:active {
  transform: scale(0.96);
}

.ilaf-companion-switch-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ilaf-companion-switch-btn {
    transition: none;
  }
}

/* Unified breathing rhythm for on-screen UI */
@keyframes ilafBreathUnified {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes ilafAuroraBadgeRing {
  0%   { transform: none;   filter: hue-rotate(0deg) saturate(1.6); }
  100% { transform: none; filter: hue-rotate(120deg) saturate(1.6); }
}

@keyframes auroraPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .ilaf-aurora-text { animation: none; }
.ilaf-aurora-slot.ilaf-visible .ilaf-aurora-text::before,
.ilaf-aurora-slot.ilaf-visible .ilaf-aurora-text::after { animation: none; }
.ilaf-aurora-slot { transition: none; }
.ilaf-meteor-text { transition: none; animation: none; }
.ilaf-aurora-slot.ilaf-visible .ilaf-meteor-text::before,
.ilaf-aurora-slot.ilaf-visible .ilaf-meteor-text::after { animation: none; }
.ilaf-companion-wrap { animation: none; }
}

/* Aurora preview overlay
   When the Aurora Alert badge is clicked, we briefly darken the frame and wash in a
   soft, blended aurora glow across the top half that fades away toward the bottom.
   This is intentionally lightweight: blurred gradients + transforms + a slow color drift. */

#ilaf-aurora-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease-in-out;
}

#ilaf-aurora-overlay.ilaf-on {
  opacity: 1;
}

#ilaf-aurora-overlay .ilaf-aurora-preview-scrim {
  position: absolute;
  inset: 0;
  /* Very subtle dim near the top so the aurora reads, but doesn't "turn the screen off". */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.12) 0%,
    rgba(0, 0, 0, 0.06) 45%,
    rgba(0, 0, 0, 0.00) 100%
  );
  opacity: 1;
}

#ilaf-aurora-overlay .ilaf-aurora-preview-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60vh;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(34px) saturate(1.6) hue-rotate(0deg);
  /* Two-layer background:
     1) a soft color wash that drifts horizontally near the top edge
     2) faint "curtain" bands that slide, like an aurora shimmering */
  background-image:
    linear-gradient(
      90deg,
      rgba(0, 255, 200, 0.26),
      rgba(70, 220, 255, 0.21),
      rgba(160, 120, 255, 0.24),
      rgba(255, 120, 200, 0.18),
      rgba(90, 255, 120, 0.24),
      rgba(0, 255, 200, 0.26)
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.10) 0 10px,
      rgba(255, 255, 255, 0.00) 10px 26px
    );
  background-size: 320% 120%, 260px 100%;
  background-position: 0% 10%, 0 0;
  background-blend-mode: screen, normal;

  /* Fade the aurora out as it approaches the bottom of the frame. */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 55%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 55%, rgba(0,0,0,0) 100%);
}

#ilaf-aurora-overlay .ilaf-aurora-preview-layer::before,
#ilaf-aurora-overlay .ilaf-aurora-preview-layer::after {
  content: '';
  position: absolute;
  inset: -22%;
  opacity: 0.92;
  transform: translate3d(0,0,0);
  background-size: 160% 160%;
  background-position: 0% 0%;
}

#ilaf-aurora-overlay .ilaf-aurora-preview-layer::before {
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(0, 255, 200, 0.85), rgba(0,0,0,0) 60%),
    radial-gradient(900px 420px at 60% 14%, rgba(160, 120, 255, 0.70), rgba(0,0,0,0) 62%),
    radial-gradient(900px 420px at 86% 20%, rgba(90, 255, 120, 0.70), rgba(0,0,0,0) 60%);
}

#ilaf-aurora-overlay .ilaf-aurora-preview-layer::after {
  background:
    radial-gradient(900px 420px at 22% 28%, rgba(70, 220, 255, 0.60), rgba(0,0,0,0) 60%),
    radial-gradient(900px 420px at 68% 34%, rgba(255, 120, 200, 0.55), rgba(0,0,0,0) 62%),
    radial-gradient(900px 420px at 88% 26%, rgba(0, 255, 140, 0.55), rgba(0,0,0,0) 62%);
}

/* Continuous aurora motion (runs when the alert is active, and can be toggled via click). */
#ilaf-aurora-overlay.ilaf-on .ilaf-aurora-preview-layer {
  opacity: 0.78;
  animation:
    ilafAuroraContinuousBreath 18s ease-in-out infinite,
    ilafAuroraColorDrift 70s ease-in-out infinite,
    ilafAuroraHueRotate 90s linear infinite;
}

#ilaf-aurora-overlay.ilaf-on .ilaf-aurora-preview-layer::before {
  animation: ilafAuroraWave1 42s ease-in-out infinite;
}

#ilaf-aurora-overlay.ilaf-on .ilaf-aurora-preview-layer::after {
  animation: ilafAuroraWave2 48s ease-in-out infinite;
}

@keyframes ilafAuroraContinuousBreath {
  0%, 100% { opacity: 0.72; transform: translateY(-2px); }
  50% { opacity: 0.86; transform: translateY(2px); }
}

@keyframes ilafAuroraColorDrift {
  0%   { background-position: 0% 10%,   0    0; }
  50%  { background-position: 100% 10%, -260px 0; }
  100% { background-position: 0% 10%,   0    0; }
}

@keyframes ilafAuroraHueRotate {
  0%   { filter: blur(34px) saturate(1.6) hue-rotate(0deg); }
  100% { filter: blur(34px) saturate(1.6) hue-rotate(90deg); }
}

@keyframes ilafAuroraWave1 {
  0%   { transform: translateX(-18%) translateY(-3%) rotate(-4deg) scale(1.18); background-position: 0% 0%; filter: hue-rotate(0deg); }
  50%  { transform: translateX(16%)  translateY(0%)  rotate(3deg)  scale(1.12); background-position: 100% 0%; filter: hue-rotate(55deg); }
  100% { transform: translateX(-12%) translateY(4%)  rotate(-2deg) scale(1.18); background-position: 0% 0%; filter: hue-rotate(110deg); }
}

@keyframes ilafAuroraWave2 {
  0%   { transform: translateX(18%)  translateY(2%)  rotate(4deg)  scale(1.16); background-position: 100% 0%; filter: hue-rotate(25deg); }
  50%  { transform: translateX(-16%) translateY(-2%) rotate(-3deg) scale(1.10); background-position: 0% 0%;   filter: hue-rotate(80deg); }
  100% { transform: translateX(12%)  translateY(3%)  rotate(2deg)  scale(1.16); background-position: 100% 0%; filter: hue-rotate(130deg); }
}

@media (prefers-reduced-motion: reduce) {
  #ilaf-aurora-overlay.ilaf-on .ilaf-aurora-preview-layer {
    opacity: 0.75;
    animation: none;
  }
  #ilaf-aurora-overlay.ilaf-on .ilaf-aurora-preview-layer::before,
  #ilaf-aurora-overlay.ilaf-on .ilaf-aurora-preview-layer::after {
    animation: none;
  }
}

/* Widgets Center */
.ilaf-widgets {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  z-index: 4;
}
.ilaf-greeting, .ilaf-quote, .ilaf-attrib, .ilaf-context {
  margin: 0.25rem 0;
}
.ilaf-greeting {
  font-size: 3.25rem;
  margin: 0.25rem 0 0.75rem 0;
  text-shadow:
    0 3px 6px rgba(0,0,0,0.9),
    0 6px 12px rgba(0,0,0,0.7);
}
.ilaf-quote {
  font-size: 2rem;
  line-height: 1.4;
  max-width: 75vw;
  margin: 0 auto;
  opacity: 0.97;
  text-shadow:
    0 3px 6px rgba(0,0,0,0.9),
    0 6px 12px rgba(0,0,0,0.7);
}
.ilaf-attrib {
  font-size: 1.5rem;
  margin-top: 0.25rem;
  max-width: 75vw;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8),
               0 4px 8px rgba(0,0,0,0.6);
}
.ilaf-context {
  font-size: 0.95rem;
  margin-top: 0.5rem;
  max-width: 75vw;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8),
               0 4px 8px rgba(0,0,0,0.6);
}

/* Time block */
.ilaf-time {
  font-size: 3rem;
  margin-top: 1rem;
  letter-spacing: 1px;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.8),
    0 4px 8px rgba(0,0,0,0.6);
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.ilaf-time-clock { font-size: 3rem; margin-bottom: 0.25rem; }
.ilaf-time-line {
  width: 50%;
  margin: 0.25rem auto;
  border: none;
  border-top: 2px solid rgba(255,255,255,0.7);
}
.ilaf-date {
  font-size: 1.4rem;
  opacity: 0.9;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8),
               0 4px 8px rgba(0,0,0,0.6);
  margin-bottom: 0.6rem;
}

/* Quote fade effect */
#ilaf-root.ilaf-quote-fade .ilaf-quote,
#ilaf-root.ilaf-quote-fade .ilaf-attrib,
#ilaf-root.ilaf-quote-fade .ilaf-context {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.ilaf-quote, .ilaf-attrib, .ilaf-context {
  transition: opacity 0.2s ease-in;
}

/* Admin helper */
.ilaf-cell-center { text-align: center; }

/* Shooting star - Wonder Layer Item */
.ilaf-star {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 2px;
  height: 2px;
  background: white;
  opacity: 0;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,255,255,0.9);
  z-index: 4;
  pointer-events: none;
  transition: transform 1s linear, opacity 1s ease-out;
}

/* --------------------------------------------------------------------------
   CELEBRATIONS BANNER STYLES
   (Rendered as `#ilaf-celebration-banner`.)
   -------------------------------------------------------------------------- */

#ilaf-celebration-banner {
  padding: 10px 20px;
  background: linear-gradient(90deg, #ff6f91, #ffc75f, #f9f871); /* Fun gradient */
  border: 3px solid white;
  border-radius: 10px;
  color: #222;
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: 1px;
  text-shadow: none;
  box-shadow: 0 0 15px rgba(255, 100, 100, 0.9);
}

@keyframes ilafCelebrationPulse {
  0%, 100% { 
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 15px rgba(255, 100, 100, 0.9);
  }
  50% { 
    transform: translateX(-50%) scale(1.02);
    box-shadow: 0 0 20px 5px rgba(255, 150, 150, 1.0);
  }
}

/* --------------------------------------------------------------------------
   FRAME ACCENT BORDER (decorative, non-interactive)
   -------------------------------------------------------------------------- */
#ilaf-frame-accent {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Keep decorative accents near the background so companion/game UI stays on top. */
  z-index: 1;
  opacity: 0;
  overflow: visible;
  transition: opacity 0.45s ease;
}

#ilaf-frame-accent.ilaf-frame-accent-active {
  opacity: var(--ilaf-frame-accent-opacity, 0.88);
}

#ilaf-frame-accent::before,
#ilaf-frame-accent::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
  background: var(--ilaf-frame-accent-gradient, linear-gradient(#ffffff, #ffffff));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

#ilaf-frame-accent::before {
  inset: 0;
  padding: var(--ilaf-frame-accent-size, 2px);
  opacity: 1;
  z-index: 1;
}

#ilaf-frame-accent::after {
  inset: calc(-1 * var(--ilaf-frame-accent-glow-spread, 14px));
  padding: calc(var(--ilaf-frame-accent-size, 2px) + var(--ilaf-frame-accent-glow-spread, 14px));
  opacity: var(--ilaf-frame-accent-glow-opacity, 0.44);
  filter: blur(var(--ilaf-frame-accent-glow-blur, 12px)) drop-shadow(0 0 6px var(--ilaf-frame-accent-glow-color, rgba(255, 255, 255, 0.7)));
  z-index: 0;
}

#ilaf-frame-accent .ilaf-frame-accent-emoji-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

#ilaf-frame-accent.ilaf-frame-accent-garland::before {
  opacity: 0.18;
}

#ilaf-frame-accent.ilaf-frame-accent-garland::after {
  opacity: min(1, calc(var(--ilaf-frame-accent-glow-opacity, 0.44) + 0.08));
}

#ilaf-frame-accent .ilaf-frame-accent-garland-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

#ilaf-frame-accent .ilaf-frame-accent-garland-path-base {
  fill: none;
  stroke: var(--ilaf-frame-accent-garland-color, #2ca84a);
  stroke-width: var(--ilaf-frame-accent-garland-thickness, 4px);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(24, 107, 39, 0.7));
  animation: ilafFrameAccentGarlandFlow 3.6s ease-in-out infinite;
}

#ilaf-frame-accent .ilaf-frame-accent-garland-path-highlight {
  fill: none;
  stroke: var(--ilaf-frame-accent-garland-highlight, rgba(214, 255, 220, 0.82));
  stroke-width: calc(var(--ilaf-frame-accent-garland-thickness, 4px) * 0.42);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.88;
}

#ilaf-frame-accent .ilaf-frame-accent-emoji {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-size: var(--ilaf-frame-accent-emoji-size, 17px);
  line-height: 1;
  opacity: 0.95;
  filter: drop-shadow(0 0 5px rgba(18, 70, 24, 0.6));
}

#ilaf-frame-accent.ilaf-frame-accent-solid::after {
  animation: ilafFrameAccentGlowBreath 7s ease-in-out infinite;
}

#ilaf-frame-accent.ilaf-frame-accent-twinkle {
  animation: ilafFrameAccentColorShift var(--ilaf-frame-accent-speed, 10s) linear infinite;
}

#ilaf-frame-accent.ilaf-frame-accent-twinkle::after {
  animation: ilafFrameAccentGlowBreath 4.8s ease-in-out infinite;
}

#ilaf-frame-accent.ilaf-frame-accent-emoji .ilaf-frame-accent-emoji {
  animation: ilafFrameAccentEmojiDrift 3.8s ease-in-out infinite;
  animation-delay: var(--ilaf-frame-accent-emoji-delay, 0s);
}

#ilaf-frame-accent.ilaf-frame-accent-garland .ilaf-frame-accent-emoji {
  filter: drop-shadow(0 0 7px rgba(30, 120, 48, 0.72));
}

@keyframes ilafFrameAccentGlowBreath {
  0%, 100% {
    opacity: var(--ilaf-frame-accent-glow-opacity, 0.44);
    filter: blur(var(--ilaf-frame-accent-glow-blur, 12px)) drop-shadow(0 0 5px var(--ilaf-frame-accent-glow-color, rgba(255, 255, 255, 0.7)));
  }
  50% {
    opacity: min(1, calc(var(--ilaf-frame-accent-glow-opacity, 0.44) + 0.16));
    filter: blur(calc(var(--ilaf-frame-accent-glow-blur, 12px) + 3px)) drop-shadow(0 0 10px var(--ilaf-frame-accent-glow-color, rgba(255, 255, 255, 0.76)));
  }
}

@keyframes ilafFrameAccentColorShift {
  0% { filter: hue-rotate(0deg) saturate(1.0); }
  50% { filter: hue-rotate(35deg) saturate(1.1); }
  100% { filter: hue-rotate(360deg) saturate(1.0); }
}

@keyframes ilafFrameAccentEmojiDrift {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.88;
  }
  50% {
    transform: translate(-50%, -52%) scale(1.08);
    opacity: 1;
  }
}

@keyframes ilafFrameAccentGarlandFlow {
  0%, 100% {
    opacity: 0.92;
    filter: drop-shadow(0 0 4px rgba(22, 92, 35, 0.68));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(32, 126, 48, 0.85));
  }
}

@media (prefers-reduced-motion: reduce) {
  #ilaf-frame-accent.ilaf-frame-accent-solid::after,
  #ilaf-frame-accent.ilaf-frame-accent-twinkle {
    animation: none;
  }
  #ilaf-frame-accent.ilaf-frame-accent-twinkle::after {
    animation: none;
  }
  #ilaf-frame-accent.ilaf-frame-accent-emoji .ilaf-frame-accent-emoji {
    animation: none;
  }
  #ilaf-frame-accent .ilaf-frame-accent-garland-path-base {
    animation: none;
  }
}


/* --------------------------------------------------------------------------
   WEATHER WIDGET (locked above backgrounds)
   -------------------------------------------------------------------------- */

.ilaf-temp {
  position: absolute;
  bottom: 28px;
  right: 28px;              /* move it to the lower-right corner */
  text-align: right;
  width: auto;
  z-index: 6 !important;    /* stay above everything except overlays */
  pointer-events: none;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  font-family: 'Inter', sans-serif;
}

.ilaf-sun-row {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* align sunrise/sunset to right */
  gap: 12px;
  font-size: 1.1rem;
  opacity: 0.9;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.ilaf-temp img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.ilaf-temp-value {
  margin-left: 4px;
  font-size: 1.6rem;
  vertical-align: middle;
}

.ilaf-sun-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
}

.ilaf-temp-core {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 3rem; /* slightly larger temperature */
  font-weight: 500;
}

.ilaf-temp-core .bi {
  font-size: 1.8rem;
  vertical-align: middle;
  color: rgba(255,255,255,0.95);
}

.ilaf-weather-icon {
  font-size: 1.05rem;
}

.ilaf-weather-icon-main {
  font-size: 1.85rem;
}

.ilaf-temp .bi {
  color: rgba(255,255,255,0.9);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   PRAIRIE WOLF - HIDE & SEEK
   -------------------------------------------------------------------------- */

/* This is the new element for the "hiding tail" */
.ilaf-hiding-tail {
  /* Use the same tail 'path' as our main wolf for consistency */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M70 70 Q90 60 80 80 Z' fill='%23b38b64' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  
  /* Sizing and positioning */
  position: fixed; /* Fixed, so it's relative to the screen, not the frame */
  width: 100px;
  height: 100px;
  z-index: 1001; /* Must be on top of everything */
  cursor: pointer;
  
  /* Hide it by default */
  opacity: 0;
  transform: scale(0.5); /* Start small */
  pointer-events: none; /* Can't be clicked when hidden */
  
  /* A nice, playful transition */
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* This class makes it "visible" and clickable */
.ilaf-hiding-tail.ilaf-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto; /* Now it can be clicked! */
}

/* --------------------------------------------------------------------------
   MINI-GAME LEADERBOARD (COMPANION)
   -------------------------------------------------------------------------- */

.ilaf-companion-leaderboard-toggle {
  position: absolute;
  top: -8px;
  left: -8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 230, 170, 0.72);
  background: rgba(58, 42, 18, 0.9);
  color: #ffe7b3;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 33;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ilaf-companion-leaderboard-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}

.ilaf-companion-leaderboard-toggle i {
  font-size: 14px;
  line-height: 1;
}

.ilaf-companion-leaderboard-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.ilaf-companion-leaderboard-overlay.ilaf-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
  pointer-events: auto;
}

.ilaf-companion-leaderboard-card {
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  transform: translateY(-6px);
  transition: transform 0.2s ease;
  background: linear-gradient(165deg, rgba(12, 18, 28, 0.96), rgba(23, 34, 51, 0.94));
  border: 1px solid rgba(183, 202, 235, 0.35);
  border-radius: 14px;
  color: #eef5ff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ilaf-companion-leaderboard-overlay.ilaf-visible .ilaf-companion-leaderboard-card {
  transform: translateY(0);
}

.ilaf-companion-leaderboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 9px 12px;
  border-bottom: 1px solid rgba(183, 202, 235, 0.22);
}

.ilaf-companion-leaderboard-title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ilaf-companion-leaderboard-close {
  border: none;
  background: transparent;
  color: rgba(238, 245, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}

.ilaf-companion-leaderboard-close:hover {
  color: #ffffff;
}

.ilaf-companion-leaderboard-view-toggle {
  display: inline-flex;
  gap: 6px;
  margin: 8px 12px 2px 12px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid rgba(187, 206, 236, 0.24);
  background: rgba(9, 16, 27, 0.45);
}

.ilaf-companion-leaderboard-view-btn {
  border: none;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: transparent;
  color: rgba(222, 235, 255, 0.8);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.ilaf-companion-leaderboard-view-btn:hover {
  color: #ffffff;
  transform: translateY(-1px);
}

.ilaf-companion-leaderboard-view-btn.is-active {
  background: rgba(112, 169, 255, 0.22);
  color: #f7fbff;
  box-shadow: inset 0 0 0 1px rgba(152, 197, 255, 0.32);
}

.ilaf-companion-leaderboard-body {
  padding: 10px 12px 12px;
  max-height: min(72vh, 540px);
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ilaf-companion-leaderboard-section {
  border: 1px solid rgba(183, 202, 235, 0.24);
  border-radius: 10px;
  background: rgba(20, 31, 47, 0.64);
  padding: 8px 9px;
}

.ilaf-companion-leaderboard-section-title {
  margin: 0 0 6px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #dbe9ff;
}

.ilaf-companion-leaderboard-empty {
  font-size: 0.76rem;
  color: rgba(228, 238, 255, 0.74);
}

.ilaf-companion-leaderboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
}

.ilaf-companion-leaderboard-table th,
.ilaf-companion-leaderboard-table td {
  text-align: left;
  padding: 3px 4px;
}

.ilaf-companion-leaderboard-table th {
  color: rgba(224, 237, 255, 0.85);
  font-weight: 600;
}

.ilaf-companion-leaderboard-table th:nth-child(1),
.ilaf-companion-leaderboard-table td:nth-child(1) {
  width: 26px;
}

.ilaf-companion-leaderboard-table th:nth-child(2),
.ilaf-companion-leaderboard-table td:nth-child(2) {
  width: 26%;
}

.ilaf-companion-leaderboard-table th:nth-child(3),
.ilaf-companion-leaderboard-table td:nth-child(3) {
  width: 31%;
}

.ilaf-companion-leaderboard-table th:nth-child(4),
.ilaf-companion-leaderboard-table td:nth-child(4) {
  width: 30%;
}

.ilaf-companion-leaderboard-table tbody tr + tr td {
  border-top: 1px solid rgba(183, 202, 235, 0.18);
}

.ilaf-companion-name-prompt-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: rgba(3, 6, 11, 0.42);
  z-index: 1110;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.ilaf-companion-name-prompt-overlay.ilaf-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease;
}

.ilaf-companion-name-prompt-card {
  width: min(440px, calc(100vw - 28px));
  border-radius: 14px;
  border: 1px solid rgba(198, 216, 244, 0.38);
  background: linear-gradient(165deg, rgba(12, 18, 29, 0.97), rgba(19, 30, 47, 0.95));
  color: #eef5ff;
  padding: 14px 14px 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.44);
  transform: translateY(-4px);
  transition: transform 0.18s ease;
}

.ilaf-companion-name-prompt-overlay.ilaf-visible .ilaf-companion-name-prompt-card {
  transform: translateY(0);
}

.ilaf-companion-name-prompt-title {
  margin: 0 0 6px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ilaf-companion-name-prompt-message {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: rgba(226, 238, 255, 0.9);
}

.ilaf-companion-name-prompt-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 9px;
  border: 1px solid rgba(173, 198, 236, 0.42);
  background: rgba(8, 14, 23, 0.72);
  color: #f5f9ff;
  font-size: 0.92rem;
  padding: 10px 11px;
}

.ilaf-companion-name-prompt-input:focus {
  outline: 2px solid rgba(152, 197, 255, 0.65);
  outline-offset: 1px;
  border-color: rgba(152, 197, 255, 0.7);
}

.ilaf-companion-name-prompt-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.ilaf-companion-name-prompt-btn {
  border-radius: 8px;
  border: 1px solid rgba(173, 198, 236, 0.36);
  color: #eef5ff;
  background: rgba(18, 28, 43, 0.84);
  padding: 7px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.ilaf-companion-name-prompt-btn.ilaf-submit {
  border-color: rgba(158, 201, 255, 0.5);
  background: rgba(50, 104, 183, 0.46);
}

.ilaf-companion-name-prompt-btn:hover {
  filter: brightness(1.08);
}

.ilaf-companion-name-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 14px;
  padding-top: clamp(12px, 8vh, 22vh);
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  background: rgba(3, 6, 11, 0.5);
  z-index: 1112;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}

.ilaf-companion-name-overlay.ilaf-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.18s ease;
}

.ilaf-companion-name-card {
  width: min(460px, calc(100vw - 28px));
  border-radius: 14px;
  border: 1px solid rgba(198, 216, 244, 0.38);
  background: linear-gradient(165deg, rgba(12, 18, 29, 0.98), rgba(19, 30, 47, 0.96));
  color: #eef5ff;
  padding: 14px 14px 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.44);
  transform: translateY(-4px);
  transition: transform 0.18s ease;
}

.ilaf-companion-name-overlay.ilaf-visible .ilaf-companion-name-card {
  transform: translateY(0);
}

.ilaf-companion-name-title {
  margin: 0 0 6px;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ilaf-companion-name-message {
  margin: 0 0 12px;
  font-size: 0.82rem;
  color: rgba(226, 238, 255, 0.9);
}

.ilaf-companion-name-input {
  width: 100%;
  box-sizing: border-box;
  border-radius: 9px;
  border: 1px solid rgba(173, 198, 236, 0.42);
  background: rgba(8, 14, 23, 0.72);
  color: #f5f9ff;
  font-size: 0.92rem;
  padding: 10px 11px;
}

.ilaf-companion-name-input:focus {
  outline: 2px solid rgba(152, 197, 255, 0.65);
  outline-offset: 1px;
  border-color: rgba(152, 197, 255, 0.7);
}

.ilaf-companion-name-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.ilaf-companion-name-btn {
  border-radius: 8px;
  border: 1px solid rgba(173, 198, 236, 0.36);
  color: #eef5ff;
  background: rgba(18, 28, 43, 0.84);
  padding: 7px 11px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.ilaf-companion-name-btn.ilaf-save {
  border-color: rgba(158, 201, 255, 0.5);
  background: rgba(50, 104, 183, 0.46);
}

.ilaf-companion-name-btn.ilaf-clear {
  border-color: rgba(230, 197, 146, 0.45);
  background: rgba(90, 65, 34, 0.62);
}

.ilaf-companion-name-btn:hover {
  filter: brightness(1.08);
}

/* --------------------------------------------------------------------------
   PRAIRIE WOLF - TAIL HUNT
   -------------------------------------------------------------------------- */

.ilaf-wolf-game-scoreboard {
  position: fixed;
  top: 150px;
  left: 16px;
  background: rgba(35, 26, 15, 0.64);
  color: #fff4df;
  padding: 10px 30px 10px 12px;
  border-radius: 12px;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1001;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ilaf-wolf-game-scoreboard.ilaf-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ilaf-wolf-game-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffe2b1;
  margin-bottom: 4px;
}

.ilaf-wolf-game-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
}

.ilaf-wolf-game-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 242, 223, 0.88);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.ilaf-wolf-game-close:hover {
  color: #ffffff;
}

@media (max-width: 640px) {
  .ilaf-companion-leaderboard-overlay,
  .ilaf-companion-name-prompt-overlay,
  .ilaf-companion-name-overlay {
    padding: 10px;
    padding-top: clamp(10px, 7vh, 20vh);
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .ilaf-companion-leaderboard-card {
    width: min(560px, calc(100vw - 20px));
    max-height: calc(100vh - 20px);
  }
  .ilaf-companion-name-prompt-card,
  .ilaf-companion-name-card {
    width: min(440px, calc(100vw - 20px));
  }
  .ilaf-wolf-game-scoreboard {
    top: 128px;
    left: 10px;
    right: 10px;
    max-width: calc(100vw - 20px);
  }
}

/* --------------------------------------------------------------------------
   PRAIRIE RACERUNNER - INSECT CATCH CHALLENGE
   -------------------------------------------------------------------------- */

.ilaf-fly-game {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}

.ilaf-fly-game-scoreboard {
  position: fixed;
  top: 150px;
  left: 16px;
  background: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  padding: 10px 30px 10px 12px;
  border-radius: 12px;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 1001;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ilaf-fly-game-scoreboard.ilaf-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ilaf-fly-game-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #cfe3e3;
  margin-bottom: 4px;
}

.ilaf-fly-game-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}

.ilaf-fly-game-meta {
  margin-top: 4px;
  font-size: 0.76rem;
  color: #d7e6eb;
  letter-spacing: 0.02em;
}

.ilaf-fly-game-divider {
  color: rgba(255, 255, 255, 0.55);
}

.ilaf-fly-game-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.ilaf-fly-game-close:hover {
  color: #ffffff;
}

.ilaf-fly {
  position: absolute;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='20' cy='22' rx='6' ry='8' fill='%232f2f2f'/%3E%3Ccircle cx='20' cy='12' r='4' fill='%232f2f2f'/%3E%3Cellipse cx='12' cy='16' rx='6' ry='3' fill='%23ffffff' opacity='0.65'/%3E%3Cellipse cx='28' cy='16' rx='6' ry='3' fill='%23ffffff' opacity='0.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  animation: ilafFlyBuzz 1.6s ease-in-out infinite;
}

.ilaf-fly-tongue {
  position: fixed;
  height: 3px;
  background: #eb4d4b;
  border-radius: 3px;
  box-shadow: 0 0 6px rgba(235, 77, 75, 0.6);
  transform-origin: left center;
  opacity: 0.9;
  pointer-events: none;
  z-index: 1002;
}

@keyframes ilafFlyBuzz {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(2px, -2px) scale(1.05); }
  100% { transform: translate(-2px, 1px) scale(1); }
}

/* --------------------------------------------------------------------------
   PRAIRIE HARE - SHADOW HOP: HAWK WATCH
   -------------------------------------------------------------------------- */

.ilaf-hare-game {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}

.ilaf-hare-game-scoreboard {
  position: fixed;
  top: 150px;
  left: 16px;
  background: rgba(17, 23, 17, 0.62);
  color: #f4fff2;
  padding: 10px 30px 10px 12px;
  border-radius: 12px;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  z-index: 1001;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ilaf-hare-game-scoreboard.ilaf-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}

.ilaf-hare-game-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ccefc8;
  margin-bottom: 4px;
}

.ilaf-hare-game-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}

.ilaf-hare-game-status {
  margin-top: 5px;
  font-size: 0.78rem;
  color: rgba(240, 255, 237, 0.86);
}

.ilaf-hare-game-signal {
  position: fixed;
  top: 86px;
  right: 16px;
  min-width: 156px;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(18, 25, 36, 0.56);
  color: #f4f8ff;
  border: 1px solid rgba(171, 207, 255, 0.35);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
  z-index: 1001;
}

.ilaf-hare-game-signal.ilaf-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ilaf-hare-game-signal.is-safe {
  background: rgba(21, 44, 31, 0.58);
  border-color: rgba(150, 221, 169, 0.48);
}

.ilaf-hare-game-signal.is-danger {
  background: rgba(58, 32, 16, 0.62);
  border-color: rgba(255, 196, 136, 0.55);
}

.ilaf-hare-game-signal-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.ilaf-hare-game-cloud,
.ilaf-hare-game-hawk {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ilaf-hare-game-cloud {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 48h28a10 10 0 0 0 1-20 14 14 0 0 0-27-2A9 9 0 0 0 18 48Z' fill='%23bfdcff'/%3E%3C/svg%3E");
}

.ilaf-hare-game-hawk {
  opacity: 0.16;
}

.ilaf-hare-game-hawk-bootstrap i {
  font-size: 18px;
  line-height: 1;
  color: #f3f8ff;
}

.ilaf-hare-game-hawk-noun img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Keep the hawk readable in the dim "safe" state, similar to feather contrast. */
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.ilaf-hare-game-signal-state {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ilaf-hare-game-signal-hint {
  margin-top: 1px;
  font-size: 0.72rem;
  color: rgba(244, 248, 255, 0.86);
}

.ilaf-hare-game-signal.is-safe .ilaf-hare-game-cloud {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(186, 230, 255, 0.7));
}

.ilaf-hare-game-signal.is-safe .ilaf-hare-game-hawk {
  opacity: 0.14;
}

.ilaf-hare-game-signal.is-danger .ilaf-hare-game-hawk {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.62));
}

.ilaf-hare-game-signal.is-danger .ilaf-hare-game-cloud {
  opacity: 0.25;
}

.ilaf-hare-game-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  color: rgba(240, 255, 237, 0.88);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.ilaf-hare-game-close:hover {
  color: #ffffff;
}

.ilaf-hare-forage {
  position: absolute;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  animation: ilafHareForageFloat 1.6s ease-in-out infinite;
}

.ilaf-hare-forage.ilaf-danger-phase {
  filter: drop-shadow(0 0 7px rgba(255, 154, 96, 0.72));
}

.ilaf-hare-forage.ilaf-danger-hit {
  animation: ilafHareDangerHit 0.28s ease-out 1;
}

.ilaf-hare-forage-clover {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='24' cy='22' r='10' fill='%234da94d'/%3E%3Ccircle cx='40' cy='22' r='10' fill='%234da94d'/%3E%3Ccircle cx='24' cy='38' r='10' fill='%234da94d'/%3E%3Ccircle cx='40' cy='38' r='10' fill='%234da94d'/%3E%3Crect x='30' y='36' width='4' height='20' rx='2' fill='%23357f35'/%3E%3C/svg%3E");
}

.ilaf-hare-forage-dandelion {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='32' cy='20' r='12' fill='%23f6d253'/%3E%3Ccircle cx='24' cy='16' r='4' fill='%23ffe389'/%3E%3Ccircle cx='40' cy='16' r='4' fill='%23ffe389'/%3E%3Ccircle cx='32' cy='10' r='3' fill='%23ffe389'/%3E%3Crect x='30' y='30' width='4' height='24' rx='2' fill='%234f9a46'/%3E%3Cpath d='M32 35 C26 38 23 42 20 48' stroke='%234f9a46' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ilaf-hare-forage-grass {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 54 C15 40 20 27 27 14' stroke='%235fa34f' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M30 54 C30 40 34 24 42 12' stroke='%236ab35a' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M46 54 C45 39 49 26 56 16' stroke='%234f9442' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ilaf-hare-forage-shoots {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='32' cy='52' rx='16' ry='6' fill='%233a6933' opacity='0.45'/%3E%3Cpath d='M32 52 L32 25' stroke='%2364bb52' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M32 34 C24 30 18 28 14 22 C22 20 28 21 32 27 Z' fill='%2379d86a'/%3E%3Cpath d='M32 30 C40 26 46 24 50 18 C42 16 36 18 32 23 Z' fill='%2387e279'/%3E%3Cpath d='M32 40 C38 36 44 36 50 32 C43 30 37 31 32 35 Z' fill='%236fd260'/%3E%3C/svg%3E");
}

@keyframes ilafHareForageFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

@keyframes ilafHareDangerHit {
  0% { transform: scale(1); }
  35% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@media (max-width: 640px) {
  .ilaf-hare-game-scoreboard {
    top: 128px;
    left: 10px;
    right: 10px;
    max-width: calc(100vw - 20px);
  }
  .ilaf-hare-game-signal {
    top: 72px;
    right: 10px;
    min-width: 138px;
  }
  .ilaf-hare-forage {
    width: 36px;
    height: 36px;
  }
}

/* --------------------------------------------------------------------------
   MONARCH BUTTERFLY - MIGRATION COMPASS
   -------------------------------------------------------------------------- */

.ilaf-monarch-compass-game {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  z-index: 1000;
}

.ilaf-monarch-compass-game.ilaf-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.ilaf-monarch-compass-scoreboard {
  position: fixed;
  top: 150px;
  left: 16px;
  background: rgba(18, 23, 34, 0.64);
  color: #f5f8ff;
  padding: 10px 30px 10px 12px;
  border-radius: 12px;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  z-index: 1001;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ilaf-monarch-compass-scoreboard.ilaf-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}

.ilaf-monarch-compass-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #d2e2ff;
  margin-bottom: 4px;
}

.ilaf-monarch-compass-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-weight: 600;
}

.ilaf-monarch-compass-status {
  margin-top: 5px;
  font-size: 0.78rem;
  color: rgba(233, 241, 255, 0.9);
}

.ilaf-monarch-compass-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  color: rgba(233, 241, 255, 0.86);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.ilaf-monarch-compass-close:hover {
  color: #ffffff;
}

.ilaf-monarch-compass-prompt {
  position: absolute;
  top: 86px;
  right: 16px;
  min-width: 132px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(18, 26, 43, 0.68);
  border: 1px solid rgba(169, 203, 255, 0.5);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34);
  text-align: center;
  color: #f2f7ff;
}

.ilaf-monarch-compass-prompt.is-live {
  border-color: rgba(255, 201, 126, 0.78);
  box-shadow: 0 0 12px rgba(255, 174, 83, 0.3), 0 8px 18px rgba(0, 0, 0, 0.34);
}

.ilaf-monarch-compass-prompt-key {
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ilaf-monarch-compass-prompt-text {
  margin-top: 4px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  opacity: 0.92;
}

.ilaf-monarch-compass-edge {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(18, 30, 48, 0.35);
  color: rgba(239, 246, 255, 0.92);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  pointer-events: none;
  touch-action: manipulation;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ilaf-monarch-compass-game.ilaf-visible .ilaf-monarch-compass-edge {
  pointer-events: auto;
}

.ilaf-monarch-compass-edge:focus-visible {
  outline: 2px solid rgba(255, 213, 149, 0.95);
  outline-offset: 2px;
}

.ilaf-monarch-compass-edge-north,
.ilaf-monarch-compass-edge-south {
  left: 50%;
  transform: translateX(-50%);
  width: min(280px, 60vw);
  height: 54px;
}

.ilaf-monarch-compass-edge-north {
  top: 10px;
}

.ilaf-monarch-compass-edge-south {
  bottom: 10px;
}

.ilaf-monarch-compass-edge-west,
.ilaf-monarch-compass-edge-east {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: min(250px, 46vh);
}

.ilaf-monarch-compass-edge-west {
  left: 10px;
}

.ilaf-monarch-compass-edge-east {
  right: 10px;
}

.ilaf-monarch-compass-edge.is-target {
  border-color: rgba(255, 206, 132, 0.95);
  background: rgba(113, 66, 16, 0.52);
  box-shadow: 0 0 14px rgba(255, 184, 94, 0.44);
}

.ilaf-monarch-compass-edge.is-correct {
  border-color: rgba(156, 246, 184, 0.95);
  background: rgba(27, 76, 44, 0.62);
  box-shadow: 0 0 12px rgba(118, 226, 164, 0.58);
}

.ilaf-monarch-compass-edge.is-wrong {
  border-color: rgba(255, 148, 148, 0.98);
  background: rgba(98, 30, 30, 0.62);
  box-shadow: 0 0 12px rgba(255, 118, 118, 0.58);
}

@media (max-width: 640px) {
  .ilaf-monarch-compass-scoreboard {
    top: 128px;
    left: 10px;
    right: 10px;
    max-width: calc(100vw - 20px);
  }
  .ilaf-monarch-compass-prompt {
    top: 72px;
    right: 10px;
    min-width: 110px;
  }
  .ilaf-monarch-compass-edge-north,
  .ilaf-monarch-compass-edge-south {
    width: min(220px, 62vw);
    height: 48px;
  }
  .ilaf-monarch-compass-edge-west,
  .ilaf-monarch-compass-edge-east {
    width: 48px;
    height: min(200px, 40vh);
  }
}

/* --------------------------------------------------------------------------
   IOWA ORNATE BOX TURTLE - SHELL MEMORY GAME
   -------------------------------------------------------------------------- */

.ilaf-turtle-memory-board {
  position: fixed;
  z-index: 1000;
  display: grid;
  --turtle-grid: 2;
  --turtle-shell-w: 40px;
  --turtle-shell-h: 68px;
  --turtle-shell-gap: 12px;
  grid-template-columns: repeat(var(--turtle-grid), var(--turtle-shell-w));
  gap: var(--turtle-shell-gap);
  padding: 12px;
  border-radius: 14px;
  background: rgba(24, 16, 8, 0.55);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
}

.ilaf-turtle-memory-board.ilaf-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
}

.ilaf-turtle-memory-board.ilaf-disabled {
  pointer-events: none;
}

.ilaf-turtle-shell {
  width: var(--turtle-shell-w);
  height: var(--turtle-shell-h);
  border-radius: 50% / 60%;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(217, 194, 122, 0.7);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 243, 209, 0.6), rgba(154, 117, 70, 0.85) 58%, rgba(92, 62, 38, 0.95) 100%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.1),
    0 6px 12px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.ilaf-turtle-shell::before {
  content: '';
  position: absolute;
  inset: 12px 6px;
  border-radius: 50% / 60%;
  border: 1px solid rgba(240, 214, 150, 0.5);
  opacity: 0.7;
}

.ilaf-turtle-shell::after {
  content: '';
  position: absolute;
  inset: 16px 9px;
  border-radius: 50% / 60%;
  background:
    linear-gradient(transparent 47%, rgba(235, 207, 130, 0.55) 49%, rgba(235, 207, 130, 0.55) 51%, transparent 53%),
    linear-gradient(90deg, transparent 47%, rgba(235, 207, 130, 0.55) 49%, rgba(235, 207, 130, 0.55) 51%, transparent 53%);
  opacity: 0.65;
  pointer-events: none;
}

.ilaf-turtle-shell.is-active {
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(255, 212, 136, 0.85);
  filter: brightness(1.15);
}

.ilaf-turtle-shell.is-correct {
  box-shadow: 0 0 12px rgba(120, 220, 150, 0.8);
  filter: brightness(1.1);
}

.ilaf-turtle-shell.is-wrong {
  box-shadow: 0 0 12px rgba(255, 120, 120, 0.9);
  filter: brightness(1.05);
}

.ilaf-turtle-shell:focus-visible {
  outline: 2px solid rgba(255, 228, 170, 0.9);
  outline-offset: 2px;
}

.ilaf-turtle-memory-scoreboard {
  position: fixed;
  background: rgba(20, 14, 8, 0.6);
  color: #fff3d0;
  padding: 8px 28px 8px 12px;
  border-radius: 12px;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  z-index: 1001;
  pointer-events: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

.ilaf-turtle-memory-scoreboard.ilaf-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
}

.ilaf-turtle-memory-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f7e1a6;
  margin-bottom: 4px;
}

.ilaf-turtle-memory-row {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
}

.ilaf-turtle-memory-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
}

.ilaf-turtle-memory-level {
  opacity: 0.85;
}

.ilaf-turtle-memory-easier {
  border: 1px solid rgba(170, 232, 190, 0.7);
  background: rgba(34, 72, 44, 0.85);
  color: #e6f6ea;
  font-size: 0.82rem;
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ilaf-turtle-memory-easier:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.ilaf-turtle-memory-easier:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.ilaf-turtle-memory-replay {
  border: 1px solid rgba(200, 232, 255, 0.7);
  background: rgba(38, 58, 82, 0.85);
  color: #f3f7ff;
  font-size: 0.82rem;
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ilaf-turtle-memory-replay:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.ilaf-turtle-memory-replay:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.ilaf-turtle-memory-harder {
  border: 1px solid rgba(255, 228, 170, 0.7);
  background: rgba(78, 56, 28, 0.8);
  color: #fff3d0;
  font-size: 0.82rem;
  padding: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.ilaf-turtle-memory-harder:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
}

.ilaf-turtle-memory-harder:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.ilaf-turtle-memory-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  color: rgba(255, 243, 209, 0.85);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px;
}

.ilaf-turtle-memory-close:hover {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .ilaf-hare-forage {
    animation: none;
    transition: none;
  }
  .ilaf-turtle-shell {
    transition: opacity 0.15s ease;
  }
  .ilaf-turtle-shell.is-active {
    transform: none;
  }
}


/* --------------------------------------------------------------------------
   LIGHTNING BUGS - WONDER LAYER
   -------------------------------------------------------------------------- */

.ilaf-lightning-bug-wrap { /* WRAPPER RENAMED */
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 3;
}

.ilaf-lightning-bug { /* BUG RENAMED */
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #f5ff9a;
  border-radius: 50%;
  box-shadow: 0 0 5px 2px rgba(245, 255, 154, 0.8);
  opacity: 0;
  transform: scale(0);
  transition: opacity 2s ease-in-out, transform 0.5s ease-out;
  /* UPDATED ANIMATION NAME */
  animation: bugGlow 2s linear infinite alternate-reverse; 
}

/* Keyframes for the gentle, soft pulsing glow (RENAMED) */
@keyframes bugGlow {
  0%, 100% { box-shadow: 0 0 5px 2px rgba(245, 255, 154, 0.8); }
  50% { box-shadow: 0 0 8px 4px rgba(245, 255, 154, 1.0); }
}

/* --------------------------------------------------------------------------
   MONARCH BUTTERFLY - COMPANION 3 OPTIMIZATION
   -------------------------------------------------------------------------- */

.ilaf-monarch {
  /* Set size and position relative to the companion wrapper */
  width: 100%;
  height: 100%;
  /* Optimize the Monarch element itself for the idle drift/movement */
  will-change: transform; 
}

/* Optimize the wings for the continuous flutter animation (scaleY transform) */
.ilaf-monarch #monarch-wings {
  will-change: transform; 
  /* Butterfly wings look better when scaled slightly smaller to fit inside the circle */
  transform: scale(0.9); 
}

/* Ensure the wings are visually distinct */
.ilaf-monarch .wing-orange {
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
}

/* --------------------------------------------------------------------------
   END OF VERIFIED FRAME.CSS — Living Art Frame (Rob Williams)
   -------------------------------------------------------------------------- */