body {
  margin: 0;
  overflow: hidden;
  font-family: Arial;
  color: white;
}

h2,
#sizeLabel {
  font-family: "Joti One", serif;
}

/* General container style */
.container{
  background: #042513;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

/* ---------- HEADER ---------- */
/* Top middle */
header{
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#anml{
  display: flex;
  align-items: center;
  gap: 10px;
}

#anml nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#animalButtons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

#furColor{
  width: 74px;
  height: 74px;
  padding: 0;
  border: 2px solid rgba(42, 145, 52, 0.35);
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fbf8 0%, #eef5ee 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

#furColor::-webkit-color-swatch-wrapper{
  padding: 5px;
}

#furColor::-webkit-color-swatch{
  border: none;
  border-radius: 10px;
}

#furColor::-moz-color-swatch{
  border: none;
  border-radius: 10px;
}

#furColor:hover{
  transform: translateY(-1px);
}

#itemsContainer,
#facesContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}


/* ---------- LEFT SECTION ---------- */
/* Left sidebar that fills height */
section{
  position: fixed;
  top: 20px;
  left: 20px;
}

#left{
  height: calc(100dvh - 40px);
  width: fit-content;
  min-width: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#left::-webkit-scrollbar {
  width: 8px;
}

#left::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

#left::-webkit-scrollbar-thumb {
  background: rgba(181, 228, 140, 0.85);
  border-radius: 999px;
}

#base,
#tms,
#accssr{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#base,
#tms{
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

#base {
  align-items: center;
}

#tms,
#accssr {
  align-items: center;
}

#itemsContainer,
#facesContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

#left .subheadings{
  font-size: 1.45rem !important;
  margin-bottom: 6px;
}


/* ---------- FOOTER ---------- */
/* Bottom center */
footer{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

#scrollIndicator{
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 180px;
  pointer-events: none;
  z-index: 5;
}

#scrollIndicatorTrack{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

#scrollIndicatorThumb{
  position: absolute;
  left: 50%;
  width: 12px;
  height: 24px;
  border-radius: 999px;
  background: #f6fff8;
  border: 2px solid #2E7D32;
  box-shadow: 0 0 0 2px rgba(42, 145, 52, 0.2);
  transform: translateX(-50%);
}

#scale{
  display: flex;
  flex-direction: column !important;
  align-items: center;
  gap: 8px;
}

#sizeLabel {
  order: 1;
  margin: 0;
  text-align: center;
}

#sizeSlider {
  order: 2;
  width: 180px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  accent-color: #2A9134;
  cursor: pointer;
}

#sizeSlider::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: #2A9134;
  border: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

#sizeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 20px;
  border-radius: 999px;
  margin-top: -5px;
  background: #f6fff8;
  border: 2px solid #2E7D32;
  box-shadow: 0 0 0 3px rgba(42, 145, 52, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#sizeSlider:hover::-webkit-slider-thumb {
  transform: scale(1.06);
}

#sizeSlider:focus-visible {
  outline: none;
}

#sizeSlider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px rgba(95, 208, 104, 0.38);
}

#sizeSlider::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: #2A9134;
  border: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

#sizeSlider::-moz-range-thumb {
  width: 28px;
  height: 20px;
  border-radius: 999px;
  background: #f6fff8;
  border: 2px solid #2E7D32;
  box-shadow: 0 0 0 3px rgba(42, 145, 52, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#sizeSlider:hover::-moz-range-thumb {
  transform: scale(1.06);
}

#sizeSlider:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 5px rgba(95, 208, 104, 0.38);
}


/* ---------- UI ELEMENTS ---------- */

button{
  padding: 6px 10px;
  margin-right: 5px;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.animalButton{
  width: 86px;
  min-height: 104px;
  padding: 8px 6px 6px;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  background: linear-gradient(180deg, #f8fbf8 0%, #eef5ee 100%);
  border: 2px solid rgba(42, 145, 52, 0.35);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.animalButton:hover{
  transform: translateY(-1px);
}

.animalButton.active {
  background: linear-gradient(180deg, #dff6e1 0%, #c8f0cc 100%) !important;
  color: #16321a !important;
  border: 2px solid #2E7D32 !important;
}

.animalPreview{
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 12px;
  background-color: #f6fff8;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46px 46px;
  border: 1px solid rgba(46, 125, 50, 0.15);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.animalLabel{
  font-family: "Joti One", serif;
  font-size: 0.92rem;
  line-height: 1;
  text-align: center;
  color: #16321a;
}

.animalButton.active .animalLabel{
  color: #16321a !important;
}

.assetButton{
  width: 78px;
  min-height: 94px;
  padding: 7px 5px 5px;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  background: linear-gradient(180deg, #f8fbf8 0%, #eef5ee 100%);
  border: 2px solid rgba(42, 145, 52, 0.35);
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.14);
}

.assetButton:hover{
  transform: translateY(-1px);
}

.assetButton.active {
  background: linear-gradient(180deg, #dff6e1 0%, #c8f0cc 100%) !important;
  color: #16321a !important;
  border: 2px solid #2E7D32 !important;
}

.assetPreview{
  width: 50px;
  height: 50px;
  display: block;
  border-radius: 12px;
  background-color: #f6fff8;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  border: 1px solid rgba(46, 125, 50, 0.15);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.assetLabel{
  font-family: "Joti One", serif;
  font-size: 0.82rem;
  line-height: 1;
  text-align: center;
  color: #16321a;
}

.assetButton.active .assetLabel{
  color: #16321a !important;
}

.itemButton .assetPreview{
  background-size: 40px 40px;
}

.macePreview{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23F7F3EC'/%3E%3Cpath d='M17 47l20-20 10 10-20 20-12 3 2-13Z' fill='%237E4F2A'/%3E%3Cpath d='M40 24l6-6 4 4-6 6z' fill='%235C3A1E'/%3E%3Ccircle cx='26' cy='38' r='3' fill='%23B68A52'/%3E%3Ccircle cx='31' cy='33' r='3' fill='%23B68A52'/%3E%3Ccircle cx='36' cy='28' r='3' fill='%23B68A52'/%3E%3Cpath d='M15 49l8-2-1 8z' fill='%23D0A06A'/%3E%3C/svg%3E");
}

.pepsiPreview{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23EEF6FF'/%3E%3Cpath d='M26 12h12l2 6v30c0 5-4 8-8 8s-8-3-8-8V18l2-6Z' fill='%23E53935'/%3E%3Cpath d='M28 18h8v28h-8z' fill='%23FFFFFF'/%3E%3Cpath d='M24 18c4-3 12-3 16 0' stroke='%232D5B9B' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24 48c4 3 12 3 16 0' stroke='%232D5B9B' stroke-width='3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.faceButton{
  width: 66px;
  min-height: 84px;
  padding-inline: 5px;
}

.facePreview{
  width: 42px;
  height: 42px;
  background-color: #ffffff;
  background-size: cover;
}

.faceOnePreview{
  background-image: url("models/faces/faceOne.png");
}

.faceTwoPreview{
  background-image: url("models/faces/faceTwo.png");
}

.faceThreePreview{
  background-image: url("models/faces/faceThree.png");
}

.faceFourPreview{
  background-image: url("models/faces/faceFour.png");
}

.faceFivePreview{
  background-image: url("models/faces/faceFive.png");
}

.giraffePreview{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23FFF8E8'/%3E%3Cpath d='M22 48V24c0-4 3-7 7-7h4c3 0 5 2 5 5v26' fill='%23D4A15D'/%3E%3Crect x='22' y='43' width='6' height='16' rx='3' fill='%23D4A15D'/%3E%3Crect x='34' y='42' width='6' height='17' rx='3' fill='%23D4A15D'/%3E%3Cpath d='M33 18c0-6 4-10 9-10 2 0 4 1 5 2v11c0 4-3 7-7 7h-2c-3 0-5-3-5-10Z' fill='%23D4A15D'/%3E%3Ccircle cx='42' cy='12' r='2' fill='%23A86D34'/%3E%3Ccircle cx='29' cy='30' r='1.8' fill='%23A86D34'/%3E%3Ccircle cx='36' cy='34' r='1.8' fill='%23A86D34'/%3E%3Ccircle cx='28' cy='40' r='1.8' fill='%23A86D34'/%3E%3Ccircle cx='39' cy='24' r='1.8' fill='%23A86D34'/%3E%3C/svg%3E");
}

.sharkPreview{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23EAF7FF'/%3E%3Cpath d='M8 35c10-11 27-15 42-11l6-7v15l-6 7c-13 4-29 2-42-4Z' fill='%234A8DB8'/%3E%3Cpath d='M19 31l-6-8h10z' fill='%23326078'/%3E%3Ccircle cx='44' cy='28' r='2' fill='%23ffffff'/%3E%3Cpath d='M42 34l7 2-7 2z' fill='%23ffffff'/%3E%3Cpath d='M54 28l6 4-6 4z' fill='%234A8DB8'/%3E%3Cpath d='M19 35c2 2 4 3 7 3' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

.monkeyPreview{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23F7EFE2'/%3E%3Ccircle cx='32' cy='32' r='16' fill='%238B5A3C'/%3E%3Ccircle cx='20' cy='26' r='7' fill='%238B5A3C'/%3E%3Ccircle cx='44' cy='26' r='7' fill='%238B5A3C'/%3E%3Ccircle cx='26' cy='31' r='2' fill='%23fff'/%3E%3Ccircle cx='38' cy='31' r='2' fill='%23fff'/%3E%3Ccircle cx='26' cy='31' r='1' fill='%23000'/%3E%3Ccircle cx='38' cy='31' r='1' fill='%23000'/%3E%3Cpath d='M27 38c3 3 7 3 10 0' stroke='%23fff' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='22' cy='27' r='2' fill='%23C58A6B'/%3E%3Ccircle cx='42' cy='27' r='2' fill='%23C58A6B'/%3E%3C/svg%3E");
}

.flamingoPreview{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23FFF1F7'/%3E%3Cpath d='M37 13c-2 8-3 12-7 18-3 4-7 8-10 13' stroke='%23E86A9D' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M29 31c7-5 15-4 20 1-1 5-5 11-11 13-7 2-12-2-16-7' fill='%23F29BC2'/%3E%3Cpath d='M45 16c4 0 6 2 6 5-2 2-5 3-8 3' stroke='%23E86A9D' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M24 50v7M30 48v9' stroke='%23E86A9D' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='49' cy='20' r='1.5' fill='%23000'/%3E%3C/svg%3E");
}

.lionPreview{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23FFF2D6'/%3E%3Ccircle cx='32' cy='32' r='15' fill='%23D28A2B'/%3E%3Cpath d='M32 12l4 6 7-2 1 7 7 1-2 7 6 4-6 4 2 7-7 1-1 7-7-2-4 6-4-6-7 2-1-7-7-1 2-7-6-4 6-4-2-7 7-1 1-7 7 2z' fill='%23B96B1D' opacity='.9'/%3E%3Ccircle cx='26' cy='29' r='2' fill='%23fff'/%3E%3Ccircle cx='38' cy='29' r='2' fill='%23fff'/%3E%3Ccircle cx='26' cy='29' r='1' fill='%23000'/%3E%3Ccircle cx='38' cy='29' r='1' fill='%23000'/%3E%3Cpath d='M28 38c3 2 5 2 8 0' stroke='%23fff' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

button.active {
  background-color: #2A9134 !important;
  color: white !important;
  font-weight: bold !important;
  border: 2px solid #2E7D32 !important;
}

h1#title{
  font-family: "Kablammo", system-ui;
  font-size: 4rem !important;
  font-weight: bold;
  line-height: 1;
  margin: 0 0 18px 0;
  text-align: center;
}

h2.subheadings{
  margin: 0 0 10px 0;
  display: block;
  font-size: 1.8rem !important;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 1200px) {
  h1#title {
    font-size: 3.2rem !important;
    margin-bottom: 12px;
  }

  .animalButton {
    width: 74px;
    min-height: 90px;
    padding: 7px 5px 5px;
    gap: 5px;
  }

  .animalPreview {
    width: 50px;
    height: 50px;
    background-size: 40px 40px;
  }

  .animalLabel {
    font-size: 0.82rem;
  }

  section {
    top: 182px;
  }

  #left {
    height: calc(100dvh - 274px);
  }
}

@media (max-width: 900px) {
  #anml {
    max-width: calc(100vw - 24px);
  }

  #animalButtons {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: calc(100vw - 44px);
    padding-bottom: 4px;
  }

  #animalButtons::-webkit-scrollbar {
    height: 6px;
  }

  #animalButtons::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
  }

  section {
    top: 156px;
    left: 12px;
  }

  #left {
    width: min(170px, calc(100vw - 24px));
    height: calc(100dvh - 246px);
  }

  footer {
    left: auto;
    right: 12px;
    transform: none;
    bottom: 12px;
  }

  #scale {
    align-items: flex-end;
  }

  #sizeSlider {
    width: 140px;
  }

  #scrollIndicator {
    display: none;
  }
}

@media (max-width: 700px), (max-height: 760px) {
  header {
    top: 12px;
  }

  h1#title {
    font-size: 2.5rem !important;
    margin-bottom: 8px;
  }

  .animalButton {
    width: 62px;
    min-height: 76px;
    border-radius: 10px;
  }

  .animalPreview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-size: 32px 32px;
  }

  .animalLabel {
    font-size: 0.72rem;
  }

  section {
    top: 132px;
  }

  #left {
    height: calc(100dvh - 206px);
    padding: 10px;
    gap: 8px;
  }

  #left .subheadings {
    font-size: 1.2rem !important;
    margin-bottom: 4px;
  }

  #furColor {
    width: 62px;
    height: 62px;
  }

  .assetButton {
    width: 66px;
    min-height: 78px;
    padding: 5px 4px 4px;
    border-radius: 10px;
  }

  .assetPreview {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-size: 32px 32px;
  }

  .assetLabel {
    font-size: 0.72rem;
  }

  .faceButton {
    width: 58px;
    min-height: 70px;
  }

  .facePreview {
    width: 34px;
    height: 34px;
  }
}