/* ========================================
   KODIAK BONES
   Shared Left Sidebar
   ======================================== */


/* ========================================
   MONTY'S GATOR GOLF BUTTON
   ======================================== */

.monty-golf-button {
  position: relative;

  width: 205px;
  height: 45px;
  box-sizing: border-box;

  margin: 14px 0 0 0;
  padding: 4px 8px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  color: #fff8d7;

  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.06) 0,
      rgba(255, 255, 255, 0.06) 6px,
      transparent 6px,
      transparent 12px
    ),
    #56336f;

  border: 3px solid #f4cf52;
  border-radius: 8px;

  box-shadow:
    0 3px 0 #38264c,
    inset 0 0 0 2px rgba(255, 255, 255, 0.13);

  font-family: Arial, Helvetica, sans-serif;

  line-height: 1;

  text-align: center;
  text-decoration: none;

  animation:
    monty-sign-blink
    1.15s
    steps(1, end)
    infinite;

  transition:
    transform 120ms ease,
    box-shadow 120ms ease;
}


/* MONTY'S */

.monty-golf-button > span {
  display: block;

  margin-bottom: 1px;

  font-size: 0.38rem;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.monty-golf-button > strong {
  display: block;

  font-size: 0.72rem;
  font-weight: 1000;
  letter-spacing: 0.035em;

  text-shadow:
    1px 1px 0 rgba(0, 0, 0, 0.3);
}

.monty-golf-button > small {
  display: block;

  margin-top: 2px;

  font-size: 0.34rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}


/* ========================================
   LITTLE SIDE STARS
   ======================================== */

.monty-golf-button::before,
.monty-golf-button::after {
  content: "★";

  position: absolute;

  top: 50%;

  color: #f4cf52;

  font-size: 0.5rem;

  transform: translateY(-50%);
}


.monty-golf-button::before {
  left: 7px;
}


.monty-golf-button::after {
  right: 7px;
}


/* ========================================
   BLINKING MONTY COLORS

   Purple + Gold
   Green + Purple
   Gold + Green
   ======================================== */

@keyframes monty-sign-blink {

  0%,
  32% {
    color: #fff8d7;

    background:
      repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.06) 0,
        rgba(255, 255, 255, 0.06) 6px,
        transparent 6px,
        transparent 12px
      ),
      #56336f;

    border-color: #f4cf52;
  }


  33%,
  65% {
    color: #2d2139;

    background:
      repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.08) 0,
        rgba(255, 255, 255, 0.08) 6px,
        transparent 6px,
        transparent 12px
      ),
      #92c957;

    border-color: #70498c;
  }


  66%,
  100% {
    color: #30233e;

    background:
      repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.09) 0,
        rgba(255, 255, 255, 0.09) 6px,
        transparent 6px,
        transparent 12px
      ),
      #f4cf52;

    border-color: #92c957;
  }
}


/* ========================================
   HOVER / KEYBOARD
   ======================================== */

.monty-golf-button:hover,
.monty-golf-button:focus-visible {
  animation-play-state: paused;

  color: #fff8d7;

  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) 6px,
      transparent 6px,
      transparent 12px
    ),
    #56336f;

  border-color: #f4cf52;

  box-shadow:
    0 5px 0 #38264c,
    inset 0 0 0 2px rgba(255, 255, 255, 0.18);

  transform: translateY(-2px);
}


.monty-golf-button:active {
  transform: translateY(2px);

  box-shadow:
    0 1px 0 #38264c;
}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

  .monty-golf-button {
    animation: none;

    color: #fff8d7;

    background:
      repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.06) 0,
        rgba(255, 255, 255, 0.06) 6px,
        transparent 6px,
        transparent 12px
      ),
      #56336f;

    border-color: #f4cf52;
  }
}


/* ========================================
   EXTREMELY LEGITIMATE GATOR AD
   ======================================== */

.gator-popup-ad {
  width: 205px;
  box-sizing: border-box;

  margin-top: 22px;

  overflow: hidden;

  background: #c0c0c0;

  border:
    2px solid #ffffff;

  border-right-color: #404040;
  border-bottom-color: #404040;

  box-shadow:
    2px 2px 0 #000000;

  font-family:
    "Arial",
    "Helvetica",
    sans-serif;

  color: #000000;
}


/* ========================================
   TITLE BAR
   ======================================== */

.gator-popup-titlebar {
  min-height: 22px;

  padding: 2px 3px 2px 6px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 4px;

  background:
    linear-gradient(
      90deg,
      #000080,
      #1084d0
    );

  color: #ffffff;

  font-size: 0.55rem;
  font-weight: 900;

  letter-spacing: 0.02em;
}


.gator-popup-close {
  width: 18px;
  height: 18px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 auto;

  appearance: none;

  background: #c0c0c0;

  border:
    2px solid #ffffff;

  border-right-color: #404040;
  border-bottom-color: #404040;

  color: #000000;

  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 900;

  line-height: 1;

  cursor: pointer;
}


.gator-popup-close:active {
  border-color: #404040;

  border-right-color: #ffffff;
  border-bottom-color: #ffffff;

  padding-top: 2px;
  padding-left: 2px;
}


/* ========================================
   AD BODY
   ======================================== */

.gator-popup-body {
  padding: 10px 8px 8px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;

  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 0, 0, 0.07) 0,
      rgba(255, 0, 0, 0.07) 5px,
      transparent 5px,
      transparent 10px
    ),
    #fff500;
}


.gator-popup-stars {
  color: #ff0000;

  font-size: 0.7rem;

  letter-spacing: 0.18em;

  animation:
    gator-ad-flash
    0.55s
    steps(1, end)
    infinite;
}


.gator-popup-congrats {
  display: block;

  margin-top: 3px;

  color: #ff0000;

  font-size: 0.9rem;
  font-weight: 1000;

  line-height: 1;

  text-shadow:
    1px 1px 0 #ffffff;
}


.gator-popup-visitor {
  display: block;

  margin-top: 6px;

  color: #000080;

  font-size: 0.62rem;
  font-weight: 900;

  line-height: 1.15;
}


.gator-popup-visitor b {
  display: block;

  margin: 2px 0;

  color: #ff0000;

  font-size: 1rem;

  text-decoration: underline;
}


.gator-popup-gator {
  margin: 5px 0 2px;

  font-size: 2.15rem;

  line-height: 1;

  filter:
    drop-shadow(
      2px 2px 0
      rgba(0, 0, 0, 0.22)
    );

  animation:
    gator-ad-gator
    0.8s
    steps(2, end)
    infinite;
}


.gator-popup-prize {
  min-height: 1.2em;

  display: block;

  color: #008000;

  font-size: 0.78rem;
  font-weight: 1000;

  line-height: 1.05;
}


/* ========================================
   CLAIM PRIZE
   ======================================== */

.gator-popup-claim {
  margin-top: 8px;
  padding: 4px 11px;

  appearance: none;

  background: #c0c0c0;

  border:
    2px solid #ffffff;

  border-right-color: #404040;
  border-bottom-color: #404040;

  color: #000000;

  font-family: Arial, sans-serif;

  font-size: 0.58rem;
  font-weight: 900;

  cursor: pointer;
}


.gator-popup-claim:hover,
.gator-popup-claim:focus-visible {
  outline:
    1px dotted #000000;

  outline-offset: -4px;
}


.gator-popup-claim:active {
  border-color: #404040;

  border-right-color: #ffffff;
  border-bottom-color: #ffffff;

  transform:
    translate(1px, 1px);
}


.gator-popup-fineprint {
  display: block;

  margin-top: 6px;

  font-size: 0.42rem;

  line-height: 1.1;
}


/* ========================================
   TASTELESS INTERNET ANIMATION
   ======================================== */

@keyframes gator-ad-flash {

  0%,
  49% {
    color: #ff0000;
    visibility: visible;
  }

  50%,
  100% {
    color: #0000ff;
    visibility: hidden;
  }

}


@keyframes gator-ad-gator {

  0%,
  49% {
    transform:
      rotate(-4deg)
      scale(1);
  }

  50%,
  100% {
    transform:
      rotate(4deg)
      scale(1.08);
  }

}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

  .gator-popup-stars,
  .gator-popup-gator {
    animation: none;
  }

}

/* ========================================
   CALM BUDDY
   ======================================== */

.calm-buddy {
  width: 205px;
  box-sizing: border-box;
  margin: 14px 0 0;
  padding: 10px 10px 11px;

  display: flex;
  flex-direction: column;
  align-items: center;

  background:
    radial-gradient(
      circle at 50% 18%,
      rgba(255, 255, 255, 0.95),
      rgba(250, 247, 252, 0.9) 58%,
      rgba(240, 235, 244, 0.92)
    );

  border: 2px solid rgba(117, 105, 128, 0.28);
  border-radius: 16px;

  box-shadow:
    0 3px 0 rgba(65, 54, 73, 0.14),
    inset 0 0 0 2px rgba(255, 255, 255, 0.65);

  color: #5f5865;
  font-family:
    ui-rounded,
    "Arial Rounded MT Bold",
    "Avenir Next Rounded",
    "Trebuchet MS",
    Arial,
    sans-serif;

  text-align: center;
}

.calm-buddy-title {
  margin-bottom: 3px;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.035em;
  text-transform: lowercase;
}

.calm-buddy-bird {
  width: 92px;
  height: 82px;
  margin: 0;
  padding: 0;

  display: grid;
  place-items: center;

  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;

  transform-origin: 50% 80%;
  -webkit-tap-highlight-color: transparent;
}

.calm-buddy-bird img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  filter: drop-shadow(0 4px 4px rgba(65, 54, 73, 0.12));
}

.calm-buddy-bird:hover img,
.calm-buddy-bird:focus-visible img {
  transform: translateY(-2px) scale(1.045);
  filter:
    drop-shadow(0 6px 5px rgba(65, 54, 73, 0.16));
}

.calm-buddy-bird:focus-visible {
  outline: 2px dashed #8e7c99;
  outline-offset: 2px;
  border-radius: 50%;
}

.calm-buddy-bird.calm-buddy-pop img {
  animation:
    calm-buddy-squish
    360ms
    cubic-bezier(.2,.85,.35,1.3);
}

@keyframes calm-buddy-squish {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.14, .82) translateY(5px); }
  58%  { transform: scale(.9, 1.13) translateY(-5px); }
  78%  { transform: scale(1.04, .97) translateY(0); }
  100% { transform: scale(1); }
}

.calm-buddy-speech {
  position: relative;

  min-width: 76px;
  min-height: 25px;
  box-sizing: border-box;

  margin: 1px 0 8px;
  padding: 5px 9px;

  display: grid;
  place-items: center;

  background: #fff;
  border: 1px solid rgba(117, 105, 128, 0.24);
  border-radius: 12px;

  color: #6e6673;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.15;
}

.calm-buddy-speech::before {
  content: "";

  position: absolute;
  top: -6px;
  left: 50%;

  width: 10px;
  height: 10px;

  background: #fff;
  border-left: 1px solid rgba(117, 105, 128, 0.24);
  border-top: 1px solid rgba(117, 105, 128, 0.24);

  transform:
    translateX(-50%)
    rotate(45deg);
}

.calm-buddy-link {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 8px;

  display: block;

  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(117, 105, 128, 0.28);
  border-radius: 10px;

  color: #61596a;
  font-size: 0.56rem;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  text-transform: lowercase;

  transition:
    transform 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}

.calm-buddy-link:hover,
.calm-buddy-link:focus-visible {
  background: #fff;
  box-shadow: 0 3px 0 rgba(65, 54, 73, 0.12);
  transform: translateY(-1px);
}

.calm-buddy-link:active {
  transform: translateY(1px);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .calm-buddy-bird img,
  .calm-buddy-link {
    transition: none;
  }

  .calm-buddy-bird.calm-buddy-pop img {
    animation: none;
  }
}


.calm-buddy-bird,
.calm-buddy-bird:hover,
.calm-buddy-bird:focus,
.calm-buddy-bird:active {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 0 !important;
  outline-offset: 3px;
}

.calm-buddy-bird img,
.calm-buddy-bird:hover img,
.calm-buddy-bird:focus img,
.calm-buddy-bird:active img {
  background: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 0 !important;
}
/* ========================================
   DARK WINDOW THEME — CALM BUDDY
   ======================================== */
html[data-window-theme="dark"] .calm-buddy {
  color: var(--window-text, #f7f0e5);
  background:
    radial-gradient(circle at 50% 18%, rgba(105, 91, 128, 0.72), rgba(67, 55, 86, 0.88) 58%, rgba(42, 43, 70, 0.94));
  border-color: var(--window-border, rgba(205,190,222,.42));
  box-shadow: 0 4px 12px rgba(0,0,0,.28), inset 0 0 0 2px rgba(255,255,255,.06);
}
html[data-window-theme="dark"] .calm-buddy-speech {
  color: #f7f0e5;
  background: rgba(38, 36, 59, .92);
  border-color: rgba(205,190,222,.30);
}
html[data-window-theme="dark"] .calm-buddy-speech::before {
  background: rgba(38, 36, 59, .92);
  border-color: rgba(205,190,222,.30);
}
html[data-window-theme="dark"] .calm-buddy-link {
  color: #f7f0e5;
  background: rgba(255,255,255,.08);
  border-color: rgba(205,190,222,.28);
}
html[data-window-theme="dark"] .calm-buddy-link:hover,
html[data-window-theme="dark"] .calm-buddy-link:focus-visible {
  background: rgba(255,255,255,.14);
  box-shadow: 0 3px 0 rgba(0,0,0,.18);
}
html[data-window-theme="dark"] .calm-buddy-bird:focus-visible {
  outline-color: #cdbede;
}

/* ========================================
   BANANA EATER — NANNER FIX
   ======================================== */

.banana-eater {
  width: 205px;
  box-sizing: border-box;
  margin: 22px 0 0;
  padding: 10px 10px 11px;
  position: relative;
  overflow: hidden;
  text-align: center;

  color: #332810;
  background:
    radial-gradient(circle at 18px 17px, rgba(255,255,255,.78) 0 2px, transparent 3px),
    linear-gradient(180deg, #fffce8 0%, #fff4b8 100%);

  border: 2px solid #e4b938;
  border-radius: 12px;

  box-shadow:
    0 3px 0 rgba(119, 83, 20, .20),
    inset 0 0 0 2px rgba(255,255,255,.62);

  font-family: Arial, Helvetica, sans-serif;
}

.banana-eater::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 9px,
      rgba(230, 184, 42, .18) 9px 11px
    );
}

.banana-eater > * {
  position: relative;
  z-index: 1;
}

.banana-eater-kicker {
  margin: 0 0 2px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .18em;
  color: #9b7213;
}

.banana-title {
  margin: 0 0 3px;
  color: #3b2b0b;
  font: 900 17px/1 "Gochi Hand", "Comic Sans MS", cursive;
  letter-spacing: .04em;
}

.banana-fruit-button {
  width: 105px;
  height: 78px;
  margin: 0 auto 1px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}

.banana-fruit {
  display: block;
  width: auto;
  height: auto;
  max-width: 90px;
  max-height: 72px;
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 2px rgba(91, 63, 16, .20));
  transition: transform 130ms ease;
}

.banana-fruit-button:hover .banana-fruit,
.banana-fruit-button:focus-visible .banana-fruit {
  transform: translateY(-3px) rotate(-4deg) scale(1.05);
}

.banana-fruit-button:focus-visible,
.banana-eat-button:focus-visible {
  outline: 2px dashed #7c5a0d;
  outline-offset: 2px;
}

.banana-fruit.is-chomped {
  animation: banana-chomp 820ms cubic-bezier(.2,.8,.3,1) both;
}

.banana-bite {
  position: absolute;
  top: 4px;
  right: -4px;
  padding: 3px 5px;
  border: 2px solid #332810;
  background: #fff;
  color: #332810;
  font: 900 9px/1 Arial, sans-serif;
  transform: rotate(8deg) scale(0);
  opacity: 0;
  pointer-events: none;
}

.banana-fruit.is-chomped + .banana-bite {
  animation: banana-chomp-word 820ms ease both;
}

.banana-total {
  width: 150px;
  margin: 0 auto 7px;
  padding: 5px 4px 4px;
  display: flex;
  flex-direction: column;
  line-height: 1.02;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(155,114,19,.28);
  border-radius: 7px;
}

.banana-total strong {
  color: #4b3709;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.banana-total span {
  margin-top: 2px;
  color: #765a18;
  font-size: 8px;
  font-weight: 700;
}

.banana-eat-button {
  min-width: 132px;
  padding: 6px 10px;
  border: 2px outset #fff4a9;
  border-radius: 5px;
  background: linear-gradient(#ffe86d, #efc92f);
  color: #332810;
  box-shadow: 0 2px 0 rgba(111,78,13,.20);
  font: 900 10px/1 Arial, sans-serif;
  cursor: pointer;
}

.banana-eat-button:hover {
  background: linear-gradient(#fff08d, #f5d84d);
}

.banana-eat-button:active {
  border-style: inset;
  transform: translateY(1px);
  box-shadow: none;
}

.banana-message {
  min-height: 1.1em;
  margin: 6px 0 0;
  color: #7b5d17;
  font-size: 9px;
  font-style: italic;
}

/* Deliberately keep this widget banana-colored in dark mode.
   It should look like a tiny physical novelty counter, not a blue glass card. */
html[data-window-theme="dark"] .banana-eater {
  color: #332810;
  background:
    radial-gradient(circle at 18px 17px, rgba(255,255,255,.65) 0 2px, transparent 3px),
    linear-gradient(180deg, #f4e9aa 0%, #ddc66d 100%);
  border-color: #9e7d25;
  box-shadow:
    0 3px 0 rgba(0,0,0,.22),
    inset 0 0 0 2px rgba(255,255,255,.30);
}

@keyframes banana-chomp {
  0%   { transform: rotate(0) scale(1); }
  18%  { transform: rotate(-11deg) scale(1.12); }
  34%  { transform: rotate(8deg) scale(.78); opacity: 1; }
  48%  { transform: rotate(-4deg) scale(.35); opacity: .35; }
  58%  { transform: rotate(0) scale(0); opacity: 0; }
  59%  { transform: rotate(0) scale(0); opacity: 0; }
  76%  { transform: rotate(4deg) scale(1.08); opacity: 1; }
  100% { transform: rotate(0) scale(1); opacity: 1; }
}

@keyframes banana-chomp-word {
  0%, 12% { transform: rotate(8deg) scale(0); opacity: 0; }
  24%, 46% { transform: rotate(8deg) scale(1); opacity: 1; }
  70%, 100% { transform: rotate(8deg) scale(.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .banana-fruit,
  .banana-fruit.is-chomped,
  .banana-bite,
  .banana-fruit.is-chomped + .banana-bite {
    animation: none;
    transition: none;
  }
}


/* ========================================
   BANANA BUTTON RESET
   Kill the global day/night button skin.
   ======================================== */

button.banana-fruit-button,
button.banana-fruit-button:hover,
button.banana-fruit-button:focus,
button.banana-fruit-button:focus-visible,
button.banana-fruit-button:active {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: 105px !important;
  height: 78px !important;
  min-width: 0 !important;
  min-height: 0 !important;

  margin: 0 auto 1px !important;
  padding: 0 !important;

  color: inherit !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  outline-offset: 2px;

  filter: none !important;
}

button.banana-fruit-button::before,
button.banana-fruit-button::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

button.banana-fruit-button .banana-fruit,
button.banana-fruit-button:hover .banana-fruit,
button.banana-fruit-button:focus .banana-fruit,
button.banana-fruit-button:active .banana-fruit {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}