.comment-container {
  background: rgba(121, 121, 219, 0.8);
  border: 1px solid #49488a;
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  color: #e0e0e0;
  width: calc(var(--col-w) * 0.5);
  margin-left: calc(var(--col-w) * 0.25);
  margin-bottom: calc(var(--col-w) * 0.15);
}

.comment-box {
  width: calc(var(--col-w) * 0.45);
  background: transparent;
  border: 1px solid #49488a00;
  border-left: 4px solid #ddacee;
  position: relative;
  transition: all 0.3s ease;
  will-change: transform, opacity;
}

[id^="comment-create-form-"] {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 20px;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  box-sizing: border-box;
}

[id^="comment-content-"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: calc(var(--col-w) * 0.05);
  background: rgb(255, 242, 242);
  border: 1px solid #49488a00;
  border-radius: 8px;
  padding: 20px;
  color: #000000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
  box-sizing: border-box;
}

.comment-container .status-message-slot {
  width: 100%;
  max-width: 100%;
  min-height: 2.5em;
}

.comment-container .status-message {
  width: 100%;
  max-width: 100%;
  font-size: calc(var(--col-w) * 0.015);
}

[id^="btn-continue-"] {
  width: min(calc(var(--col-w) * 0.15), 100%);
  height: calc(var(--col-w) * 0.05);
  background: rgba(129, 137, 255, 0.461);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 32px;
  border: 2px solid rgb(243, 243, 255);
  color: #ffffff;
  text-shadow: 0 1px 3px rgb(236, 231, 255);
  position: relative;
  margin: 0;
  font-size: calc(var(--col-w) * 0.025);
  cursor: pointer;
  pointer-events: auto;
  align-self: center;
  text-align: center;
  box-shadow: 0 0 var(--glow-blur) var(--glow-color);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.avatar-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: clamp(36px, 2vw, 81px);
  height: clamp(36px, 2vw, 81px);
}
.avatar-img {
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  transition: transform 0.2s;
}
.avatar-dead,
.avatar-pleading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  display: none;
}
.action-gun {
  margin-top: calc(var(--col-w) * 0.015);
  width: 24px;
  height: 24px;
  background: url("../assets/gun.png") center/contain no-repeat;
  position: absolute;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.action-shot {
  position: absolute;
  right: 35px;
  margin-top: calc(var(--col-w) * 0.015);
  top: -3px;
  width: 24px;
  height: 24px;
  background: url("../assets/shot.png") center/contain no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

#comment-visitor-container {
  font-size: calc(var(--col-w) * 0.015);
  font-family: "Segoe UI Black", sans-serif;
  font-weight: bold;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0);
  color: #aceee8;
  align-self: left;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
}

#comment-visitor-container::before {
  font-size: calc(var(--col-w) * 0.025);
  color: #000000;
  align-self: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
}

.btn-cmt-prev,
.btn-cmt-next {
  margin: 0;
  width: calc(var(--col-w) * 0.05);
  height: calc(var(--col-w) * 0.025);
  background: rgba(129, 137, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 32px;
  border: 2px solid rgb(243, 243, 255);
  color: #ffffff;
  text-shadow: 0 1px 3px rgb(236, 231, 255);
  font-size: calc(var(--col-w) * 0.008);
  cursor: pointer;
  box-shadow: 0 0 var(--glow-blur) var(--glow-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.btn-cmt-more {
  margin: 0;
  width: calc(var(--col-w) * 0.2);
  height: calc(var(--col-w) * 0.035);
  background: rgba(129, 137, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 32px;
  border: 2px solid rgb(243, 243, 255);
  color: #ffffff;
  text-shadow: 0 1px 3px rgb(236, 231, 255);
  font-size: calc(var(--col-w) * 0.025);
  cursor: pointer;
  box-shadow: 0 0 var(--glow-blur) var(--glow-color);
  display: flex;
  justify-content: center;
  align-items: center;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.btn-cmt-more:hover,
.btn-cmt-prev:hover,
.btn-cmt-next:hover,
.btn-cmt-more:focus,
.btn-cmt-prev:focus,
.btn-cmt-next:focus,
.btn-cmt-more:active,
.btn-cmt-prev:active,
.btn-cmt-next:active {
  background: rgba(129, 137, 255, 0.7);
  box-shadow: 0 0 8px rgba(129, 137, 255, 0.5);
  outline: none;
}