/* ====================
HOMEPAGE BACKGROUND (page-specific image, size shared via global.css or inline vars)
==================== */
body {
  background-image: var(--bg-image);
  background-size: var(--bg-size);
  background-repeat: repeat;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ====================
HERO SECTION IMAGE AND TEXT BOX (homepage-specific arrangement)
==================== */
.site-header {
width: 97%;
}

.hero-section {
  margin-top: 3px;
  margin-bottom: 5px;
}

.hero-container {
  max-width: 1000px;
  height: 426px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 7px;
}

.hero-image {
  flex: 0 0 auto;
  width: 60%;
  height: 100%;
  overflow: visible;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-text-stack {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 9px;
  min-height: 0;
  overflow: visible;
}

.text-box {
  flex: 1;
  min-height: 0;
  border-radius: 20px;
  border-width: 4px;
  border-style: solid;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
}

.text-box p {
  margin: 0;
  font-family: 'Sniglet', arial, sans-serif;
  font-size: 2.3rem;
  line-height: 1.2;
  text-align: center;
}

/* Individual color palettes */
.text-box-1 {
  background: #edf1b8;
  border-color: #b33b1e;
  flex: .7;
}

.text-box-1 p {
  color: #b85a2b;
  font-size: 2.5rem;
  letter-spacing: 0.06em;
  line-height: 1.1;
}

.text-box-2 {
  background: #dfe7f7;
  border-color: #4d5ca8;
  transform: scaleX(-1);
  transition: transform 0.5s ease;
}

.text-box-2 p {
  color: #5960b2;
  font-size: 2.22rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.text-box-2:hover {
  transform: scaleX(1);
}

.text-box-2.flipped {
  transform: scaleX(1);
}

.text-box-3 {
  background: #edf0c7;
  border-color: #2f7c25;
  transform: rotate(180deg);
  transition: transform 0.4s ease;
}

.text-box-3 p {
  color: #77611d;
  font-size: 2.4rem;
  letter-spacing: 0.03em;
  line-height: 1.09;
}

.text-box-3:hover {
  transform: rotate(0deg);
}

.text-box-1, .text-box-2, .text-box-3 {
  box-shadow: 0 0 4px 2px rgba(255, 245, 150, 0.84);
}

/* ====================
COIN ROLL EFFECT
==================== */
.coin-link {
  display: inline-block;
  cursor: pointer;
}

.coin-link img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes coin-roll {
  0%   { transform: rotate(0deg) translateX(0px); }
  25%  { transform: rotate(-90deg) translateX(-4px); }
  50%  { transform: rotate(-180deg) translateX(0px); }
  75%  { transform: rotate(-270deg) translateX(4px); }
  100% { transform: rotate(-360deg) translateX(0px); }
}

.coin-link .coin-rolling {
  animation: coin-roll 4s linear infinite;
}

/* ====================
WOBBLE EFFECT (renamed from duplicate "jello" — see note below)
==================== */
@keyframes wobble {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  20% { transform: scaleX(1.2) scaleY(0.8); }
  40% { transform: scaleX(0.9) scaleY(1.1); }
  60% { transform: scaleX(1.1) scaleY(0.9); }
  80% { transform: scaleX(0.95) scaleY(1.05); }
}

.hairy-bunny:hover img {
  animation: wobble 0.8s ease-in-out;
}

/* ====================
WOBBLE LINK SECTION (circle rows)
==================== */
.circle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1000px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 5px;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
          drop-shadow(0 0 3px rgba(255, 255, 255, 0.6));
}

.circle-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 100%;
  max-width: 1000px;
  gap: 4px;
  margin-bottom: 5px;
}

/* Row 1 — three links */
.row-1 { gap: 4px; }
.row-1 a { flex: 1; }
.row-1 a img {
  width: 100%;
  max-width: 333px;
  height: auto;
  display: block;
}
.row-1 a:hover img { transform: scale(1.03); }

/* Row 2 — four links */
.row-2 { gap: 4px; }
.row-2 a { flex: 1 1 auto; }
.row-2 a img {
  width: 244px;
  height: auto;
  display: block;
}
.row-2 a:hover img { transform: scale(1.03); }

/* Row 3 — seven links */
.row-3 {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 100%;
  gap: 4px;
}
.row-3 a img {
  width: 149px;
  height: auto;
  display: block;
}
.row-3 a:hover img { transform: scale(1.03); }

/* ====================
MOBILE RESPONSIVE
==================== */
@media (max-width: 768px) {

  html {
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    background-size: var(--bg-size-mobile);
  }

  .hero-container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: auto;
    max-width: 100%;
    padding: 0 2px;
    box-sizing: border-box;
  }

  .hero-image {
    width: 100%;
    height: auto;
    max-width: none;
    flex: none;
    margin: 0 auto;
    padding-right: 0;
    margin-bottom: 4px;
  }

  .hero-image img {
    width: 99%;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
  }

  .hero-text-stack {
    width: 100%;
    height: auto;
    flex: none;
    gap: 9px;
    padding: 0 2px;
  }

  .text-box {
    flex: none;
    height: auto;
    min-height: 80px;
    padding: 6px 10px;
    border-width: 3px;
  }

  .text-box p {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }

  .text-box-1 p { font-size: clamp(2.1rem, 6.5vw, 2.7rem); }
  .text-box-2 p { font-size: clamp(1.9rem, 6vw, 2.6rem); }
  .text-box-3 p { font-size: clamp(2rem, 6vw, 2.3rem); }

  .circle-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 7px;
  }

  .circle-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 7px;
    margin-bottom: 4px;
    margin: 0 auto;
  }

  .circle-row a {
    flex: 1;
  }

  .row-1 a img { width: 100%; max-width: 115px; height: auto; margin-bottom: 4px; }
  .row-2 a img { width: 100%; max-width: 80px; height: auto; }
  .row-3 a img { width: 47px; height: auto; }
}