/* Common */

:root {
  --tamagotchi-pink-color: #E4007F;
  --tamagotchi-purple-color: #833D93;
  --tamagotchi-blue-color: #00AAE7;
  --tamagotchi-green-color: #6EB92B;
  --tamagotchi-yellow-color: #E7CB21;
  --tamagotchi-yellow-dark-color: #BFA70C;
  --tamagotchi-background-white: #FFFFFFAA;
  --tamagotchi-background-lilac: #E8CFFF;
}

body {
  background-color: var(--tamagotchi-background-lilac);
  background-image: url('/assets/shrines/tamagotchi/ui/tamagotchi_background.webp');
  background-size: cover;
  background-position: center;
}

h1 {
  font-size: 96px;
  background: linear-gradient(90deg, var(--tamagotchi-pink-color) 0%, var(--tamagotchi-purple-color) 25%, var(--tamagotchi-blue-color) 50%, var(--tamagotchi-green-color) 90%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;

  @media screen and (max-width: 767px) {
    font-size: 48px;
  }
}

h2 {
  font-size: 48px;
  color: #E4007F;
  margin: 0;

  @media screen and (max-width: 767px) {
    font-size: 36px;
  }
}

.tab-title {
  position: relative;
  display: flex;
  align-items: center;
  width: 90%;
  margin-top: 16px;

  @media screen and (min-width: 1101px) {
    height: 32px;
  }
}

.tab-title > span {
  position: absolute;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  bottom: -4px;

  @media screen and (max-width: 1100px) {
    display: none;
  }
}

.tab-title > h2 {
  position: absolute;
  z-index: 1;
  text-shadow: 2px 2px 4px white;
  margin: 0;

  @media screen and (max-width: 1100px) {
    position: relative;
  }
}

#care-tab .tab-title > span {
  background: linear-gradient(90deg, var(--tamagotchi-pink-color) 50%, var(--tamagotchi-purple-color) 100%);
  width: 150px;
}

#lore-tab .tab-title > span {
  background: linear-gradient(90deg, var(--tamagotchi-purple-color) 50%, var(--tamagotchi-blue-color) 100%);
  width: 450px;
}

#growth-chart-tab .tab-title > span {
  background: linear-gradient(90deg, var(--tamagotchi-blue-color) 50%, var(--tamagotchi-green-color) 100%);
  width: 400px;
}

#characters-tab .tab-title > span {
  background: linear-gradient(90deg, var(--tamagotchi-green-color) 50%, var(--tamagotchi-yellow-color) 100%);
  width: 350px;
}

#my-notes-tab .tab-title > span {
  background: linear-gradient(90deg, var(--tamagotchi-yellow-color) 50%, var(--tamagotchi-pink-color) 100%);
  width: 300px;
}

p, li {
  color: var(--tamagotchi-purple-color);
  font-size: 0.9rem !important; /* To override global styles that increased the size and broke some components */
}

b {
  color: var(--tamagotchi-pink-color);
}

ul {
  margin: 8px;
  padding: 0;
  list-style-position: inside;
  text-align: left;
}

li {
  text-indent: 0;
  margin: 2px;
}

img {
  max-width: 100%;
}

a:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
}

#content {
  display: flex;
  flex-direction: column;
  width: calc(100% - 128px);
  max-width: 1000px;
  background-color: var(--transparent-white-color);
  border-radius: 16px;
  justify-content: center;
  align-items: center;

  @media screen and (max-width: 1000px) {
    width: calc(100% - 32px);
  }
}

#title-container {
  background: var(--tamagotchi-background-white);
  padding-bottom: 100px;
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;

  --mask:
    radial-gradient(64.03px at 50% calc(100% - 90px),#000 99%,#0000 101%) 50% 0/200px 100%,
    radial-gradient(64.03px at 50% calc(100% + 40px),#0000 99%,#000 101%) calc(50% - 100px) calc(100% - 50px)/200px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

#title-container > p {
  margin: 8px 64px;
  color: var(--tamagotchi-pink-color);

  @media screen and (max-width: 767px) {
    margin: 8px 16px;
  }
}

#content-container {
  display: flex;
  padding: 16px;

  @media screen and (max-width: 1250px) {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  @media screen and (max-width: 767px) {
    padding: 8px;
  }
}

/* Navigation */

.tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 16px;
  background: var(--tamagotchi-background-white);

  @media screen and (min-width: 1251px) {
    padding: 16px 8px 16px 0;
    margin-left: 16px;
    width: 180px;
  }

  @media screen and (max-width: 1250px) {
    flex-direction: row;
    padding: 16px;
    justify-content: center;
    flex-wrap: wrap;
    width: calc(100% - 32px);
  }
}

.tab-button {
  font-size: 20px;
  font-weight: bold;
  color: white;
  border: none;

  @media screen and (min-width: 1251px) {
    --r: .4em;
    --c: var(--tamagotchi-pink-color);
    margin-left: -8px;
    line-height: 1.8; 
    padding: calc(2*var(--r)) .5em 0;
    border-radius: var(--r) 0 0 var(--r);
    background: 
      radial-gradient(100% 50% at left,var(--c) 98%,#0000 101%)
      100% 100%/.5lh calc(100% - 2*var(--r)),
      radial-gradient(100% 50% at right,#0005 98%,#0000 101%) 
      0 0/var(--r) calc(2*var(--r)),
      conic-gradient(at var(--r) calc(2*var(--r)),#0000 25%,var(--c) 0)
      0 0/calc(101% - .5lh) 100%;
    background-repeat: no-repeat;
  }

  @media screen and (max-width: 1250px) {
    border-radius: 16px;
    background: var(--tamagotchi-pink-color);
    flex: 1;
    height: 64px;
  }
}

.tab-button:hover {
  cursor: pointer;
  opacity: 0.9;
}

.tab-button:nth-of-type(2) {
  @media screen and (min-width: 1251px) {
    --c: var(--tamagotchi-purple-color);
  }

  @media screen and (max-width: 1250px) {
    background: var(--tamagotchi-purple-color);
  }
}

.tab-button:nth-of-type(3) {
  @media screen and (min-width: 1251px) {
    --c: var(--tamagotchi-blue-color);
  }

  @media screen and (max-width: 1250px) {
    background: var(--tamagotchi-blue-color);
  }
}

.tab-button:nth-of-type(4) {
  @media screen and (min-width: 1251px) {
    --c: var(--tamagotchi-green-color);
  }

  @media screen and (max-width: 1250px) {
    background: var(--tamagotchi-green-color);
  }
}

.tab-button:nth-of-type(5) {
  @media screen and (min-width: 1251px) {
    --c: var(--tamagotchi-yellow-color);
  }

  @media screen and (max-width: 1250px) {
    background: var(--tamagotchi-yellow-color);
  }
}

/* Content */

.tab-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 650px;
  margin: 0 16px;

  @media screen and (max-width: 1250px) {
    width: calc(100% - 32px);
  }

  @media screen and (max-width: 767px) {
    margin: 0;
    gap: 16px;
  }
}

.text-container {
  width: calc(100% - 32px);
  padding: 0 16px;
  border-radius: 16px;
  background: var(--tamagotchi-background-white);

  @media screen and (max-width: 767px) {
    width: calc(100% - 16px);
  }
}

.text-with-image img {
  @media screen and (max-width: 767px) {
    display: none;
  }
}

.interactive-image-container {
  @media screen and (min-width: 1251px) {
    --w: 650px;
  }

  @media screen and (max-width: 1250px) {
    --w: 530px;
  }

  --s: 20px;
  --ratio: 1; /* height ÷ width — override per container */
  --unit: calc(4 * var(--s));

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

  width: round(var(--w), var(--unit));
  height: round(calc(round(var(--w), var(--unit)) * var(--ratio)), var(--unit));

  padding: var(--s);
  border: var(--s) solid #0000;
  box-sizing: border-box;
  background: var(--tamagotchi-background-white);
  border-radius: calc(3.5 * var(--s));

  mask:
    radial-gradient(calc(sqrt(2) * var(--s)), #000 calc(100% - 1px), #0000),
    conic-gradient(#000 0 0) content-box,
    radial-gradient(calc(sqrt(2) * var(--s)), #0000 100%, #000 calc(100% + 1px))
      var(--s) var(--s) padding-box;
  mask-size: var(--unit) var(--unit);

  @media screen and (max-width: 776px) {
    display: none;
  }
}

.interactive-image-element {
  position: absolute;
  z-index: 1;
  border: none;
  background: none;
  border-radius: 16px;
}

.interactive-image-element:hover {
  cursor: pointer;
}

.interactive-image-element > div {
  display: none;
  position: relative;
}

.interactive-image-element:hover > div {
  display: flex;
}

.tooltip-container {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 300px;
}

.tooltip-arrow {
  width: 0;
  height: 0;
  border: 15px solid;
}

.tooltip-arrow.left {
  border-color: transparent var(--tamagotchi-yellow-color) transparent transparent;
  border-left: none;
}

.tooltip-arrow.top {
  border-color: transparent transparent var(--tamagotchi-yellow-color) transparent;
  border-top: none;
}

.tooltip-arrow.right {
  border-color: transparent transparent transparent var(--tamagotchi-yellow-color);
  border-right: none;
}

.tooltip-arrow.bottom {
  border-color: var(--tamagotchi-yellow-color) transparent transparent transparent;
  border-bottom: none;
}

.tooltip-content {
  flex-direction: column;
  padding: 8px;
  border-radius: 16px;
  background-color: white;
  border: 1px solid var(--tamagotchi-yellow-color);
}

#hover-tip {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 24px;
}

#new-old-switch {
  display: flex;
  gap: 8px;
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 24px;
}

.new-old-button {
  height: 40px;
  aspect-ratio: 1.5;
  border-radius: 8px;
  color: white;
  background-color: var(--tamagotchi-yellow-color);
  border: none;
}

.new-old-button:hover {
  opacity: 0.9;
  cursor: pointer;
}

.new-old-button.active {
  background: var(--tamagotchi-yellow-dark-color);
}

/* Care content */

#care-tab {
  display: flex;
  flex-direction: column;
}

#feed-care {
  top: 32.5%;
  left: 11%;
  height: 45px;
  width: 85px;
}

#feed-care .tooltip-container {
  left: 90px;
  top: -8px;
}

#feed-care .tooltip-arrow {
  margin-top: 16px;
}

#light-care {
  top: 17%;
  left: 22%;
  width: 90px;
  height: 50px;
}

#light-care .tooltip-container {
  top: 55px;
  flex-direction: column;
}

#light-care .tooltip-arrow {
  margin-left: 16px;
}

#play-care {
  top: 19%;
  left: 54.5%;
  width: 87px;
  height: 54px;
}

#play-care .tooltip-container {
  top: 60px;
  right: 0;
  flex-direction: column;
  align-items: end;
}

#play-care .tooltip-arrow {
  margin-right: 16px;
}

#medicine-care {
  top: 33.5%;
  left: 71%;
  width: 140px;
  height: 45px;
}

#medicine-care .tooltip-container {
  top: -8px;
  right: 145px;
  flex-direction: row-reverse;
}

#medicine-care .tooltip-arrow {
  margin-top: 16px;
}

#attention-care {
  top: 50%;
  left: 72.5%;
  width: 140px;
  height: 40px;
}

#attention-care .tooltip-container {
  top: -8px;
  right: 145px;
  flex-direction: row-reverse;
}

#attention-care .tooltip-arrow {
  margin-top: 16px;
}

#discipline-care {
  top: 75%;
  left: 68.5%;
  width: 140px;
  height: 45px;
}

#discipline-care .tooltip-container {
  right: 0;
  bottom: 0;
  flex-direction: column-reverse;
  align-items: end;
}

#discipline-care .tooltip-arrow {
  margin-right: 16px;
}

#health-meter-care {
  top: 69.5%;
  left: 6.5%;
  width: 130px;
  height: 80px;
}

#health-meter-care .tooltip-container {
  bottom: 0;
  flex-direction: column-reverse;
}

#health-meter-care .tooltip-arrow {
  margin-left: 16px;
}

#duck-care {
  top: 51.5%;
  left: 4%;
  width: 88px;
  height: 44px;
}

#duck-care .tooltip-container {
  left: 93px;
  top: -8px;
}

#duck-care .tooltip-arrow {
  margin-top: 16px;
}

/* Lore tab */


#planet-locations-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  margin: 16px 0;
  border-top: 6px dotted var(--tamagotchi-pink-color);
  border-bottom: 6px dotted var(--tamagotchi-pink-color);
}

.planet-location-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 600px;
  width: 100%;
  gap: 16px;

  @media screen and (max-width: 767px) {
    height: 550px;
    overflow-y: auto;
  }
}

.planet-location-image {
  width: 100%;
  display: flex;
  justify-content: center;
}

.planet-location-image > img {
  border-radius: 16px;
  box-shadow: 0 0 4px var(--tamagotchi-pink-color);

  @media screen and (max-width: 767px) {
    max-height: 250px;
  }
}

.planet-location-details {
  text-align: center;
}

.planet-location-controls {
  display: flex;
  gap: 64px;
}

.planet-location-button {
  background-color: var(--tamagotchi-pink-color);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 16px;
}

.planet-location-button:hover {
  cursor: pointer;
  opacity: 0.9;
}

/* Growth chart tab */

#growth-chart-tab {
  display: flex;
  flex-direction: column;
}

#growth-chart-tab .tooltip-container {
  left: 45px;
  top: -8px;
}

#growth-chart-tab .tooltip-content {
  border-color: var(--tamagotchi-yellow-dark-color);
}

#growth-chart-tab .tooltip-container.left {
  flex-direction: row-reverse;
  left: -300px;
  top: -8px;
}

#growth-chart-tab .tooltip-arrow.left {
  margin-top: 16px;
  border-right-color: var(--tamagotchi-yellow-dark-color);
}

#growth-chart-tab .tooltip-arrow.right {
  margin-top: 16px;
  border-left-color: var(--tamagotchi-yellow-dark-color);
}

#growth-chart-old-image-container #shirobabytchi-conditions,
#growth-chart-new-image-container #shirobabytchi-conditions {
  top: 46.5%;
  left: 8.5%;
  height: 40px;
  width: 40px;
}

#growth-chart-old-image-container #tonmarutchi-conditions,
#growth-chart-new-image-container #tonmarutchi-conditions {
  top: 46.8%;
  left: 22.8%;
  height: 40px;
  width: 40px;
}

#growth-chart-old-image-container #tongaritchi-1-conditions,
#growth-chart-new-image-container #tongaritchi-1-conditions {
  top: 22.5%;
  left: 37.5%;
  height: 40px;
  width: 40px;
}

#growth-chart-old-image-container #hashitamatchi-1-conditions,
#growth-chart-new-image-container #hashitamatchi-1-conditions {
  top: 33.5%;
  left: 37%;
  height: 40px;
  width: 40px;
}

#growth-chart-old-image-container #tongaritchi-2-conditions,
#growth-chart-new-image-container #tongaritchi-2-conditions {
  top: 60.8%;
  left: 38%;
  height: 40px;
  width: 40px;
}

#growth-chart-old-image-container #hashitamatchi-2-conditions,
#growth-chart-new-image-container #hashitamatchi-2-conditions {
  top: 71%;
  left: 37.5%;
  height: 40px;
  width: 40px;
}

#growth-chart-old-image-container #mimitchi-tongaritchi-1-conditions,
#growth-chart-new-image-container #mimitchi-tongaritchi-1-conditions {
  top: 15%;
  left: 63.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #pochitchi-tongaritchi-1-conditions,
#growth-chart-new-image-container #pochitchi-tongaritchi-1-conditions {
  top: 15%;
  left: 54.2%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #pochitchi-tongaritchi-2-conditions {
  top: 55.5%;
  left: 50%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #nyatchi-tongaritchi-1-conditions {
  top: 20.5%;
  left: 48.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #zuccitchi-tongaritchi-1-conditions {
  top: 21%;
  left: 68%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #zuccitchi-tongaritchi-1-conditions {
  top: 26.5%;
  left: 64%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #zuccitchi-tongaritchi-2-conditions {
  top: 56.5%;
  left: 54%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #zuccitchi-tongaritchi-2-conditions {
  top: 56%;
  left: 59.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #hashizoutchi-tongaritchi-1-conditions {
  top: 20.5%;
  left: 59%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #hashizoutchi-tongaritchi-1-conditions {
  top: 20.5%;
  left: 51%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #hashizoutchi-hashitamatchi-1-conditions,
#growth-chart-new-image-container #hashizoutchi-hashitamatchi-1-conditions {
  top: 35%;
  left: 56.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #hashizoutchi-hashitamatchi-2-conditions {
  top: 70%;
  left: 53.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #kusatchi-tongaritchi-1-conditions,
#growth-chart-new-image-container #kusatchi-tongaritchi-1-conditions {
  top: 26.5%;
  left: 54%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #kusatchi-hashitamatchi-1-conditions,
#growth-chart-new-image-container #kusatchi-hashitamatchi-1-conditions {
  top: 40.5%;
  left: 52.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #kusatchi-tongaritchi-2-conditions {
  top: 63%;
  left: 48.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #kusatchi-tongaritchi-2-conditions {
  top: 62.5%;
  left: 49.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #kusatchi-hashitamatchi-2-conditions,
#growth-chart-new-image-container #kusatchi-hashitamatchi-2-conditions {
  top: 75.5%;
  left: 48.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #takotchi-tongaritchi-1-conditions {
  top: 26.5%;
  left: 64%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #takotchi-tongaritchi-1-conditions {
  top: 20.5%;
  left: 68.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #takotchi-hashitamatchi-1-conditions,
#growth-chart-new-image-container #takotchi-hashitamatchi-1-conditions {
  top: 40.5%;
  left: 61.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #takotchi-tongaritchi-2-conditions {
  top: 63.2%;
  left: 58%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #takotchi-tongaritchi-2-conditions {
  top: 62.2%;
  left: 59%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #takotchi-hashitamatchi-2-conditions,
#growth-chart-new-image-container #takotchi-hashitamatchi-2-conditions {
  top: 75.5%;
  left: 58.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #zatchi-tongaritchi-1-conditions {
  top: 26.5%;
  left: 79.2%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #zatchi-tongaritchi-2-conditions {
  top: 52.5%;
  left: 68.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #zatchi-tongaritchi-2-conditions {
  top: 54.5%;
  left: 72%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #sekitoritchi-tongaritchi-1-conditions {
  top: 32.5%;
  left: 74.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #sekitoritchi-tongaritchi-2-conditions {
  top: 60%;
  left: 68.5%;
  height: 45px;
  width: 45px;
}

#growth-chart-new-image-container #sekitoritchi-tongaritchi-2-conditions {
  top: 61%;
  left: 72.2%;
  height: 45px;
  width: 45px;
}

#growth-chart-old-image-container #charitchi-tongaritchi-2-conditions {
  top: 56%;
  left: 76.5%;
  height: 45px;
  width: 45px;
}

/* Characters tab */

#characters-tab, #lore-tab {
  gap: 16px;
}

#characters-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
  gap: 32px;
  padding: 16px 0;
  margin: 16px 0;
}

.character-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 400px;
  width: 100%;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    height: 550px;
    overflow-y: auto;
  }
}

.character-summary {
  display: flex;
  gap: 32px;
  height: 250px;
  align-items: center;

  @media screen and (max-width: 767px) {
    flex-direction: column;
    height: 400px;
  }
}

.character-image {
  position: relative;
  width: 250px;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.character-image > .blob {
  position: absolute;
  width: 250px;
  aspect-ratio: 1;
  background: white;
  clip-path: shape(from 90.08% 61.73%,curve to 81.81% 78.12% with 85.92% 69.75%,smooth to 69.30% 91.48%,smooth to 51.92% 91.75%,smooth to 34.56% 85.65%,smooth to 18.60% 78.94%,smooth to 6.06% 64.90%,smooth to 7.59% 47.67%,smooth to 13.29% 28.39%,smooth to 21.94% 14.03%,smooth to 40.31% 12.19%,smooth to 57.13% 14.12%,smooth to 72.27% 18.28%,smooth to 85.67% 28.86%,smooth to 93.03% 44.58%,smooth to 90.08% 61.73%);
}

.character-image > .shadow {
  width: 75px;
  height: 75px;
  border-radius: 100%;
  background: none;
  box-shadow: 0 0 64px var(--tamagotchi-pink-color);
  position: absolute;
  z-index: 1;
}

#kusatchi-character .shadow, #zatchi-character .shadow {
  width: 50px;
  height: 50px;
  top: 40px;
}

#charitchi-character .shadow{
  width: 50px;
  height: 50px;
  top: 60px;
}

.character-image > img {
  position: absolute;
  z-index: 2;
}

.character-stats {
  background: var(--tamagotchi-background-white);
  padding: 0 16px;
  border-radius: 16px;
  border: 1px dashed var(--tamagotchi-pink-color);
  width: 200px;
  height: fit-content;
}

.character-details {
  text-align: center;
}

.character-controls {
  display: flex;
  gap: 64px;
}

.character-button {
  background-color: var(--tamagotchi-pink-color);
  border: none;
  color: white;
  padding: 12px 24px;
  border-radius: 16px;
}

.character-button:hover {
  cursor: pointer;
  opacity: 0.9;
}

.closed {
  display: none !important;
}

.centered-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px;
}

.signature {
  text-align: right;
  color: var(--tamagotchi-pink-color);
}

.text-with-image {
  display: flex;
  gap: 16px;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .mobile {
    display: none;
  }
}