.hutaro-embed-text { margin: 1rem 0; }
.hutaro-embed-text.align-left { text-align: left; }
.hutaro-embed-text.align-center { text-align: center; }
.hutaro-embed-text.align-right { text-align: right; }

.hutaro-embed-box {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid #d7ddd8;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f7faf8 100%);
  box-shadow: 0 10px 24px rgba(31, 38, 36, 0.06);
}
.hutaro-embed-box > :first-child {
  margin-top: 0;
}
.hutaro-embed-box > :last-child {
  margin-bottom: 0;
}

.hutaro-embed-counter {
  display: inline-block;
  min-width: 7.8ch;
  padding: 0.06rem 0.34rem 0.08rem;
  background: #000;
  color: #fff;
  font-family: "MS PGothic", "Osaka", Menlo, Consolas, monospace;
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}

.hutaro-one-liners {
  margin: 0.25rem 0 0.8rem;
}
.hutaro-one-liners-lead {
  margin: 0.35rem 0 0.15rem;
  color: #aaa;
}
.hutaro-one-liners-list {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.entry-content .hutaro-one-liners-list {
  margin: 0;
}
.hutaro-one-liners-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.08rem 0.45rem;
  line-height: 1.35;
}
.hutaro-one-liners-message {
  overflow-wrap: anywhere;
}
.hutaro-one-liners-date {
  color: #68746d;
  font-size: 0.92em;
}
.hutaro-one-liners-status,
.hutaro-one-liners-form-status {
  margin: 0.4rem 0;
  color: #68746d;
}
.hutaro-one-liners-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.hutaro-one-liners-form input {
  flex: 1 1 18rem;
  min-width: 0;
  padding: 0.42rem 0.56rem;
  border: 1px solid #cbd6ce;
  border-radius: 4px;
  background: #fff;
  color: inherit;
  font: inherit;
}
.hutaro-one-liners-form button,
.hutaro-one-liners-delete {
  border: 1px solid #b9c7bd;
  border-radius: 4px;
  background: #f6faf7;
  color: #31533a;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
}
.hutaro-one-liners-form button {
  padding: 0.45rem 0.8rem;
}
.hutaro-one-liners-delete {
  padding: 0.2rem 0.45rem;
  font-size: 0.86rem;
}
.hutaro-one-liners-form button:hover,
.hutaro-one-liners-delete:hover {
  background: #edf6ef;
  border-color: #8fb99b;
}

.hutaro-embed-latest-posts { margin: 1.2rem 0; }
.hutaro-embed-latest-posts ul { margin: 0; padding: 0; }
.hutaro-embed-latest-posts li { margin: 0; }

.hutaro-joke-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.4rem 0 1.1rem;
  overflow: visible;
}
.hutaro-joke-button {
  position: relative;
  overflow: visible;
  border: 1px solid #d4d8dd;
  background: #f7f9fb;
  color: #4a525c;
  border-radius: 999px;
  padding: 0.44rem 0.88rem;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(22, 27, 34, 0.06);
  transform: translateY(0) scale(1);
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  z-index: 0;
}
.hutaro-joke-button::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: var(--hutaro-ripple-x, 50%);
  top: var(--hutaro-ripple-y, 50%);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.hutaro-joke-button::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.hutaro-joke-button:hover {
  border-color: #b7bec7;
  background: #f0f3f6;
  color: #38414a;
  box-shadow: 0 2px 5px rgba(22, 27, 34, 0.1);
}
.hutaro-joke-button[aria-pressed="true"] {
  background: #e3f4e7;
  border-color: #98cfa4;
  color: #1f5a2b;
  box-shadow: inset 0 1px 2px rgba(19, 74, 33, 0.14), 0 0 0 3px rgba(74, 163, 98, 0.2);
}
.hutaro-joke-button:active {
  transform: translateY(1px) scale(0.98);
}
.hutaro-joke-button.hutaro-joke-pop {
  animation: hutaro-joke-pop 260ms cubic-bezier(0.22, 0.75, 0.3, 1.2);
}
.hutaro-joke-button.hutaro-joke-ripple::after {
  animation: hutaro-joke-ripple 460ms ease-out;
}
.hutaro-joke-button.hutaro-joke-shine::before {
  inset: -25%;
  background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, 0.72) 50%, transparent 72%);
  transform: translateX(-115%);
  animation: hutaro-joke-shine 480ms ease-out;
  pointer-events: none;
}
.hutaro-joke-button.hutaro-joke-glow {
  animation: hutaro-joke-glow 520ms ease-out;
}
.hutaro-joke-particle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: auto;
  height: auto;
  background: transparent;
  color: var(--hutaro-particle-color, #64b171);
  font-size: var(--hutaro-particle-size, 12px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
  opacity: 0;
  pointer-events: none;
  animation: hutaro-joke-particle 620ms ease-out forwards;
  z-index: 3;
}

@keyframes hutaro-joke-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-1px) scale(1.07);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes hutaro-joke-ripple {
  0% {
    opacity: 0.68;
    transform: translate(-50%, -50%) scale(0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(17);
  }
}
@keyframes hutaro-joke-shine {
  0% {
    transform: translateX(-115%);
  }
  100% {
    transform: translateX(115%);
  }
}
@keyframes hutaro-joke-particle {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(0.25) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1.1) rotate(var(--hutaro-particle-rotate, 35deg));
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--hutaro-particle-x, 0), var(--hutaro-particle-y, 0)) scale(0.7) rotate(calc(var(--hutaro-particle-rotate, 35deg) + 120deg));
  }
}
@keyframes hutaro-joke-glow {
  0% {
    box-shadow: 0 1px 2px rgba(22, 27, 34, 0.06);
  }
  45% {
    box-shadow: 0 0 0 4px rgba(74, 163, 98, 0.18), 0 8px 18px rgba(45, 122, 63, 0.22);
  }
  100% {
    box-shadow: 0 1px 2px rgba(22, 27, 34, 0.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hutaro-joke-button,
  .hutaro-joke-button::after,
  .hutaro-joke-button.hutaro-joke-pop,
  .hutaro-joke-button.hutaro-joke-ripple::after,
  .hutaro-joke-button.hutaro-joke-shine::before,
  .hutaro-joke-button.hutaro-joke-glow,
  .hutaro-joke-particle {
    animation: none !important;
    transition: none !important;
  }
}

.hutaro-image {
  margin: 1rem 0;
}
.hutaro-image img {
  display: block;
  max-width: 100%;
  height: auto;
}
.hutaro-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: #666;
  text-align: center;
}
.hutaro-image[data-voices] {
  position: relative;
}
.hutaro-voice-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hutaro-voice-burst {
  position: absolute;
  transform: translate(-50%, -50%);
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.05;
  font-size: clamp(1rem, 0.9rem + 1vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #547443;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  opacity: 0;
  animation: hutaro-voice-burst 3000ms ease forwards;
}

.hutaro-ticker {
  position: relative;
  margin: 1.2rem 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
}
.hutaro-ticker-track {
  display: inline-block;
  white-space: nowrap;
  min-width: max-content;
  will-change: transform;
  animation: hutaro-ticker-bounce 6s linear infinite alternate;
}
.hutaro-ticker-static .hutaro-ticker-track {
  animation: none;
  min-width: 0;
}
.hutaro-ticker-static {
  text-align: center;
}
.hutaro-ticker-text {
  display: inline-block;
  font-size: clamp(1rem, 0.8rem + 1.3vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.1rem 0.3rem;
}
.hutaro-ticker-color-rainbow .hutaro-ticker-text {
  background: linear-gradient(90deg, #ff3b3b, #ff9f1a, #ffe66d, #2ec4b6, #4d96ff, #b07cff, #ff3b3b);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hutaro-rainbow 4s linear infinite;
}
.hutaro-ticker-color-white .hutaro-ticker-text { color: #fff; }
.hutaro-ticker-color-accent .hutaro-ticker-text { color: var(--wp--preset--color--accent, #0f766e); }

@keyframes hutaro-ticker-bounce {
  0% { transform: translateX(calc(-1 * var(--hutaro-ticker-shift, 0px))); }
  100% { transform: translateX(var(--hutaro-ticker-shift, 0px)); }
}

@keyframes hutaro-rainbow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes hutaro-voice-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(0.96);
  }
  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, calc(-50% - 4px)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 8px)) scale(1.02);
  }
}

.hutaro-achievement-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 12000;
}

.hutaro-achievement-popup {
  position: fixed;
  left: 50%;
  bottom: 2.2rem;
  transform: translate(-50%, 18px) scale(0.98);
  width: min(92vw, 540px);
  background: #000;
  border: 3px solid #fff;
  outline: 2px solid #fff;
  outline-offset: -8px;
  box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255, 255, 255, 0.22);
  color: #fff;
  padding: 1rem 1.1rem 0.96rem;
  opacity: 0;
  transition: opacity 2000ms ease, transform 2000ms ease;
  pointer-events: auto;
}

.hutaro-achievement-popup.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.hutaro-achievement-popup.is-leaving {
  opacity: 0;
  transform: translate(-50%, 10px) scale(0.985);
}

.hutaro-achievement-title,
.hutaro-achievement-comment {
  margin: 0;
  text-align: center;
  font-family: "Press Start 2P", "VT323", "MS PGothic", "Osaka", "Courier New", monospace;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #000;
}

.hutaro-achievement-title {
  color: #fff;
  font-size: clamp(0.86rem, 0.74rem + 0.45vw, 1.02rem);
}

.hutaro-achievement-comment {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(255, 230, 109, 0.85);
  color: #ffe66d;
  font-size: clamp(0.68rem, 0.61rem + 0.32vw, 0.8rem);
}

.hutaro-achievement-char {
  display: inline-block;
}

.hutaro-achievement-title .hutaro-achievement-char {
  animation: hutaro-achievement-blink-main 560ms steps(1, end) infinite;
  animation-delay: calc(var(--hutaro-char-delay-ms, 0) * -1ms);
}

.hutaro-achievement-comment .hutaro-achievement-char {
  animation: hutaro-achievement-blink-sub 680ms steps(1, end) infinite;
  animation-delay: calc(var(--hutaro-char-delay-ms, 0) * -1ms);
}

@keyframes hutaro-achievement-blink-main {
  0% { color: #fff; opacity: 1; }
  50% { color: #ffe66d; opacity: 1; }
  100% { color: #fff; opacity: 1; }
}

@keyframes hutaro-achievement-blink-sub {
  0% { color: #ffe66d; opacity: 1; }
  50% { color: #fff; opacity: 1; }
  100% { color: #ffe66d; opacity: 1; }
}

@media (max-width: 640px) {
  .hutaro-achievement-popup {
    bottom: 1.2rem;
    width: min(94vw, 540px);
    padding: 0.84rem 0.72rem 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hutaro-achievement-popup,
  .hutaro-achievement-popup.is-visible,
  .hutaro-achievement-popup.is-leaving,
  .hutaro-achievement-title,
  .hutaro-achievement-comment {
    animation: none !important;
    transition: none !important;
  }
}