@font-face {
  font-family: 'AnimalCrossingFont';
  src: url('/assets/games/ac-game/fonts/dialog.eot');
  src: url('/assets/games/ac-game/fonts/dialog.woff2') format('woff2'),
       url('/assets/games/ac-game/fonts/dialog.woff') format('woff'),
       url('/assets/games/ac-game/fonts/dialog.ttf') format('truetype');
}

@keyframes blinking {
  50% {
    opacity: 0;
  }
}

#animal-crossing-game p, #animal-crossing-game a, #animal-crossing-game button, #animal-crossing-game .inventory-table {
  font-family: 'AnimalCrossingFont', Fallback, sans-serif;
  font-size: 14px;
  line-height: 140%;
  margin: 0;
  font-weight: bold;
}

#splash-screen {
  background-image: url('/assets/games/ac-game/ui/splash.png');
  background-color: #81C9A4;
  position: absolute;
  top: -16px;
  width: 512px;
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

#ui-elements {
  position: absolute;
  top: -16px;
  width: 512px;
  height: 320px;
  z-index: 9;
}

#ui-elements > div {
  position: relative;
  width: 100%;
  height: 100%;
}

#datetime {
  background-color: #74664b80;
  position: absolute;
  top: 16px;
  right: 12px;
  display: flex;
  flex-direction: column;
  padding: 2px 8px;
  border: 3px solid #fafafa;
  border-top: none;
  border-right: none;
  border-radius: 0 0 0 8px;
}

#clock, #date {
  display: flex;
}

#clock > img, #date > img {
  margin-right: 4px;
}

#clock > p, #date > p {
  color: #fafafa;
}

#time-separator {
  animation: blinking 1s step-start infinite;
  margin: 0 1px !important;
}

#menu-tabs {
  position: absolute;
  top: 16px;
  left: 2px;
  display: flex;
  gap: 2px;
}

#menu-tabs > div {
  border-radius: 0 0 8px 8px;
  border: 3px solid;
  border-top: none;
  padding: 2px 4px;
  display: flex;
  gap: 8px;
  align-items: center;
}

#menu-tabs > div > p {
  font-weight: bold;
}

#items-tab {
  background-color: #ffe680;
  border-color: #ffaa00 !important;
}

#items-tab > p {
  color: #ffaa00;
}

#phone-tab {
  background-color: #a9ff6b;
  border-color: #299b1f !important;
}

#phone-tab > p {
  color: #299b1f;
}

#menu-tab {
  background-color: #ecb3ff;
  border-color: #AC00E6 !important;
}

#menu-tab > p {
  color: #AC00E6;
}

#splash-button {
  position: absolute;
  left: 96px;
  bottom: 48px;
  padding: 8px 16px;
  border-radius: 8px;
  color: #8E6233;
  cursor: pointer;
  background: #E6B945;
  border: none;
  border-bottom: 3px solid #8E6233;
}

#splash-button:hover {
  border-bottom: none;
}

.menu-button {
  color: #D100FF;
  border: 1px solid #2D0C15;
  border-radius: 16px;
  padding: 8px 16px;
  color: #2D0C15;
  background: #DF852D;
}

.menu-button:hover {
  cursor: pointer;
  opacity: 0.8;
}

#options-menu, #credits, #phone-menu {
  height: 100%;
  width: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: #74664b80;
}

#options-menu > div > p, #phone-menu > div > p {
  color: #fafafa;
  font-size: 14px;
}

#options-menu > div > p:first-child, #phone-menu > div > p:first-child {
  font-size: 24px;
}

#options-menu > div, #credits > div, #phone-menu > div {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 50%;
}

#options-menu > div > div, #phone-menu > div > div {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#credits > div > p, #credits > div > p > a {
  color: #fafafa;
}

#credits > div > p > a {
  text-decoration: underline;
}

#credits > div > button {
  margin-top: 16px;
}

canvas {
  position: absolute;
  top: -16px;
  left: -6px;
}

.game-container {
  position: relative;
  width: 500px;
  height: 288px;
  margin-bottom: 32px;
  overflow: hidden;
}

#canvas-0 {
  z-index: 2;
  background-color: #4E9A4F;
}

#canvas-1 {
  z-index: 3;
}

#canvas-2 {
  z-index: 4;
}

#canvas-3 {
  z-index: 5;
  background: linear-gradient(35deg,rgba(148, 187, 233, 1) 0%, rgba(238, 174, 202, 1) 50%);
  opacity: 0.2;
}

#dialog-container {
  position: absolute;
  z-index: 6;
  width: 512px;
  height: 320px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  display: none;
}

#dialog-container p {
  color: #74664b;
}

#dialog-container > div {
  position: relative;
  width: 328px;
  height: 100px;
}

#dialog-name-container {
  background-image: url('/assets/games/ac-game/ui/button.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: fit-content 20px;
  position: absolute;
  bottom: 125px;
  left: -32px;
  min-width: 92px;
  width: fit-content;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  rotate: -8deg;
  padding: 8px;
}

#dialog-name-container > p {
  color: #2D0C15;
}

#dialog-text-container {
  background-image: url('/assets/games/ac-game/ui/dialogue.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 328px 100px;
  position: absolute;
  bottom: 40px;
  width: 328px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialog-text-container > p {
  width: 75%;
  height: 80%;
  overflow: auto;
}

#options-container {
  background-image: url('/assets/games/ac-game/ui/options.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  position: absolute;
  bottom: 115px;
  left: 280px;
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

#options-container > p {
  padding: 0 4px;
  text-wrap-mode: nowrap;
}

#options-container > p.active {
  background: linear-gradient(0deg, #FDD000 8px, #00000000 0%);
}

.inventory-overlay {
  position: absolute;
  z-index: 7;
  width: 100%;
  height: 288px;
  background: #555555aa;
  display: none;
}

.inventory-container {
  margin: 24px;
  padding: 8px 16px;
  background: #ffe298;
  width: -webkit-fill-available;
  height: -webkit-fill-available;
  border-radius: 8px;
  border: 2px solid #703a1d;
  overflow: auto;
}

.inventory-container::-webkit-scrollbar-thumb {
  background: #703a1d;
  border-radius: 1px;
}

.inventory-container::-webkit-scrollbar {
  width: 2px;
}

.inventory-table {
  width: 100%;
  text-align: left;
  color: #703a1d;
  border-spacing: 0;
}

.inventory-table td, .inventory-table th {
  padding: 4px 8px;
  border: 2px solid transparent;
  text-transform: capitalize;
}

.inventory-table tr.active {
  border-radius: 8px;
  box-shadow: 0 0 2px #703a1d80;
}

.inventory-table tr.active td:first-child {
  border-radius: 8px 0 0 8px;
  border: 2px solid #703a1d;
  border-right: none;
  background-color: #fafafa80;
}

.inventory-table tr.active td:last-child {
  border-radius: 0 8px 8px 0;
  border: 2px solid #703a1d;
  border-left: none;
  background-color: #fafafa80;
}

.inventory-table .item-column {
  width: 85%;
}

.inventory-table td:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inventory-table td:last-child {
  text-align: center;
}

#ac-title {
  position: absolute;
  top: -125px;
}

#alfonso-chat {
  position: absolute;
  bottom: -40px;
  left: 12px;
  z-index: 10;
}

#alfonso-speech-bubble {
  bottom: 60px;
  left: 150px;
}

#kiki-chat {
  position: absolute;
  bottom: 0px;
  right: 12px;
  z-index: 10;
}

#kiki-speech-bubble {
  bottom: 60px;
  right: 130px;
}

#kiki-speech-bubble > div > img {
  transform: scaleX(-1);
}