.readout {
  width: 150px;
}

.sheet-header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  border-bottom: 2px solid rgba(247, 244, 255, 0.48);
  padding-bottom: 6px;
}

.sheet-portrait {
  width: 48px;
  height: 56px;
  border: 2px solid rgba(247, 244, 255, 0.58);
  border-radius: 4px;
  background: rgba(5, 5, 8, 0.72);
  box-shadow: inset 0 0 0 2px rgba(5, 5, 8, 0.5), 0 0 12px rgba(248, 213, 107, 0.18);
  object-fit: cover;
  object-position: center top;
}

.sheet-title {
  margin: 0 0 5px;
  border-bottom: 0;
  padding-bottom: 0;
}

.sheet-name {
  color: var(--text);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.05;
}

.readout.is-leveling-up {
  animation: sheet-level-up 900ms ease-out;
}

.level-up-notice {
  position: fixed;
  left: 50%;
  top: 28%;
  z-index: 45;
  display: grid;
  gap: 4px;
  min-width: 170px;
  border: 2px solid rgba(255, 232, 104, 0.88);
  border-radius: 6px;
  padding: 10px 14px;
  background:
    linear-gradient(180deg, rgba(39, 18, 72, 0.94), rgba(7, 9, 18, 0.94)),
    rgba(5, 5, 8, 0.94);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.78), 0 0 22px rgba(255, 216, 72, 0.38), 0 0 38px rgba(87, 180, 255, 0.24);
  color: #fff7c8;
  font-family: "Trebuchet MS", Arial, sans-serif;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -12px) scale(0.92);
  opacity: 0;
  pointer-events: none;
}

.level-up-notice.is-showing {
  animation: level-up-pop 1800ms ease-out forwards;
}

.level-up-notice span {
  color: #74e7ff;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0;
}

.level-up-notice strong {
  color: #fff7c8;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.level-up-notice em {
  color: #ffde59;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 900;
}

@keyframes level-up-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.86);
  }

  12%,
  72% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -12px) scale(0.96);
  }
}

@keyframes sheet-level-up {
  0%,
  100% {
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.68), 0 0 18px rgba(124, 60, 255, 0.18);
  }

  35% {
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.68), 0 0 24px rgba(255, 216, 72, 0.62), 0 0 38px rgba(87, 180, 255, 0.36);
  }
}

@media (max-width: 620px) {
  .readout {
    width: 126px;
  }

  .sheet-header {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 6px;
  }

  .sheet-portrait {
    width: 34px;
    height: 40px;
  }

  .sheet-name {
    font-size: 0.56rem;
  }

  .level-up-notice {
    top: 24%;
    min-width: 150px;
    padding: 9px 12px;
  }
}