#my-pets {
  display: flex;
  gap: 5vw;
}

#map {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 40%;
  height: 30vw;
  background: url("https://pirahxcx.neocities.org/pets/assets/images/map.webp") 0 0 / contain no-repeat;
}

#map-main, #map-sub {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

#map-main label {
  z-index: 3;
}

#map-sub label {
  z-index: 2;
}

#map img {
  positiong: absolute;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 0 0;
  pointer-events: none;
}

#map span {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  font: 2.5vw "Umbrage";
  color: gold;
  --outline-size: 1px;
  --outline-color: #46281e;
  text-shadow: var(--outline-size) 0 0 var(--outline-color),
    calc(var(--outline-size) * -1) 0 0 var(--outline-color),
    0 var(--outline-size) 0 var(--outline-color),
    0 calc(var(--outline-size) * -1) 0 var(--outline-color),
    var(--outline-size) var(--outline-size) 0 var(--outline-color),
    calc(var(--outline-size) * -1) var(--outline-size) 0 var(--outline-color),
    var(--outline-size) calc(var(--outline-size) * -1) 0 var(--outline-color),
    calc(var(--outline-size) * -1) calc(var(--outline-size) * -1) 0 var(--outline-color);
}

#board {
  display: flex;
  width: 50%;
  height: 32vw;
  padding: 3.2vw 1.8vw;
  overflow: hidden;
  background: url("https://pirahxcx.neocities.org/pets/assets/images/board.avif") center center / 100% 90% no-repeat;
}

#board-inner {
  width: 100%;
  padding: 0.5vw;
}

#board-inner > span {
  display: flex;
  height: 80%;
  justify-content: center;
  align-items: center;
  margin: auto;
  font: 2.5vw 'Caveat';
  color: black;
}

#board-inner div {
  position: relative;
  flex-wrap: wrap;
  gap: 0.5vw;
  overflow-y: auto;
}

#board-inner div:not(.extra) {
  display: none;
  height: 100%;
}

.extra {
  flex: 0 0 100%;
  display: flex;
}

.profile {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 23%;
  aspect-ratio: 1 / 1;
  padding-bottom: 1.6vw;
  overflow: hidden;
  transform-origin: center center;
  transition: transform 0.2s ease;
}

.profile img {
  display: block;
  pointer-events: none;
}

.profile-frame {
  position: absolute;
  top: 0.1vw;
  width: 100%;
}

.profile-name {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%) rotate(var(--rotation, 0deg));
  white-space: nowrap;
  pointer-events: none;
  font: 1.2vw "Caveat";
  color: black;
  text-shadow: none;
}

.profile:hover, .profile:focus-visible {
  transform: scale(1.05);
  z-index: 3;
}

.profile:hover .profile-name, .profile:focus-visible .profile-name {
  --outline-size: 1px;
  --outline-color: gold;
  text-shadow: var(--outline-size) 0 0 var(--outline-color),
    calc(var(--outline-size) * -1) 0 0 var(--outline-color),
    0 var(--outline-size) 0 var(--outline-color),
    0 calc(var(--outline-size) * -1) 0 var(--outline-color),
    var(--outline-size) var(--outline-size) 0 var(--outline-color),
    calc(var(--outline-size) * -1) var(--outline-size) 0 var(--outline-color),
    var(--outline-size) calc(var(--outline-size) * -1) 0 var(--outline-color),
    calc(var(--outline-size) * -1) calc(var(--outline-size) * -1) 0 var(--outline-color);
}

#newsbox {
  width: 80%;
  height: 20vw;
  margin: 0 auto;
}

#newsbox-header a {
  margin-left: auto;
  transition: transform 0.2s ease;
}

#newsbox-header a:hover, #newsbox-header a:focus-visible {
  margin-left: auto;
  transform: scale(1.2);
}

#newsbox-entries {
  display: flex;
  flex-direction: column;
  padding: 1ch;
  overflow-y: auto;
  color: white;
  font-size: 0.8rem;
  text-align: justify;
  background: #9f5aa8;
  --outline-size: 1px;
  --outline-color: black;
  text-shadow: var(--outline-size) 0 0 var(--outline-color),
    calc(var(--outline-size) * -1) 0 0 var(--outline-color),
    0 var(--outline-size) 0 var(--outline-color),
    0 calc(var(--outline-size) * -1) 0 var(--outline-color),
    var(--outline-size) var(--outline-size) 0 var(--outline-color),
    calc(var(--outline-size) * -1) var(--outline-size) 0 var(--outline-color),
    var(--outline-size) calc(var(--outline-size) * -1) 0 var(--outline-color),
    calc(var(--outline-size) * -1) calc(var(--outline-size) * -1) 0 var(--outline-color);
}

#newsbox-entries article {
  padding-block: 0.5ch;
  border-bottom: 0.15vw solid #3a1a40;
}

#newsbox-entries article:first-of-type {
  padding-top: 0;
}

#newsbox-entries article:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}

#newsbox-entries span + article {
  border-top: 0.15vw solid #3a1a40;
}

#newsbox-entries time {
  text-decoration: underline;
}

#newsbox-entries span {
  display: block;
  margin-block: 1lh;
  text-align: center;
}

body:has(#mapinner:checked) #map-main label[for="mapinner"],
body:has(#mappleb:checked)  #map-main label[for="mappleb"] { z-index: 1; }

body:has(#mappleb:checked, #mapinner:checked) #board-inner > span { display: none; }

body:has(label[for="mapelder"]:hover, #mapelder:focus-visible,
label[for="mapboy"]:hover, #mapboy:focus-visible,
label[for="mapindie"]:hover, #mapindie:focus-visible,
label[for="maphigh"]:hover, #maphigh:focus-visible,
label[for="maplow"]:hover, #maplow:focus-visible) :is(#elder, #boy, #indie, #high, #low) { display: none !important; }

body:has(label[for="mapinner"]:hover, #mapinner:focus-visible) :is(#mapinner-img, #mapinner-label),
body:has(label[for="mappleb"]:hover, #mappleb:focus-visible) :is(#mappleb-img, #mappleb-label),
body:has(label[for="mapelder"]:hover, #mapelder:focus-visible) :is(#mapelder-img, #mapelder-label, #elder),
body:has(label[for="mapboy"]:hover, #mapboy:focus-visible) :is(#mapboy-img, #mapboy-label, #boy),
body:has(label[for="mapindie"]:hover, #mapindie:focus-visible) :is(#mapindie-img, #mapindie-label, #indie),
body:has(label[for="maphigh"]:hover, #maphigh:focus-visible) :is(#maphigh-img, #maphigh-label, #high),
body:has(label[for="maplow"]:hover, #maplow:focus-visible) :is(#maplow-img, #maplow-label, #low) { display: flex !important; }

body:has(#mapelder:checked) #elder,
body:has(#mapboy:checked) #boy,
body:has(#mapindie:checked) #indie,
body:has(#maphigh:checked) #high,
body:has(#maplow:checked) #low { display: flex; }