/* ==========================================================================
   MEMORI — nama-nama tamu yang perlahan memudar
   ========================================================================== */

.memory-tools { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.search { display: flex; align-items: center; gap: 10px; border-bottom: 1.5px solid var(--graphite); padding: 4px 0; min-width: min(100%, 320px); }
.search input { border: 0; background: none; outline: none; font-family: var(--hand); font-size: 28px; color: var(--ink); width: 100%; padding: 0; }
.search input::placeholder { color: rgb(31 45 115 / .35); }
.search .mono { font-size: 12px; color: var(--muted); white-space: nowrap; }

.wall {
  position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 6px 4px; padding: clamp(28px, 5vw, 64px) clamp(8px, 3vw, 40px); margin-top: 28px; min-height: 60vh;
  background: var(--sheet); box-shadow: var(--shadow-paper);
}
.wall-name {
  position: relative; border: 0; background: none; padding: 4px 10px;
  font-family: var(--hand); color: var(--ink); line-height: 1;
  opacity: var(--o, 1);
  transform: rotate(var(--rot, 0deg)) translateY(var(--dy, 0));
  transition: opacity .6s, color .3s, transform .4s var(--ease), filter .6s;
  filter: blur(calc((1 - var(--o, 1)) * 1.6px));
  animation: float 9s ease-in-out infinite alternate; animation-delay: var(--delay, 0s);
}
@keyframes float { to { translate: 0 -5px; } }
.wall-name:hover, .wall-name:focus-visible, .wall-name.is-hit { opacity: 1; filter: none; transform: rotate(0deg) scale(1.06); }
.wall-name.is-miss { opacity: .06; }
.wall-name.is-me::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 3, 80 10, 120 6 S 180 4, 198 7' fill='none' stroke='%23de8f22' stroke-width='3' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}
.wall-name.is-hidden { text-decoration: line-through; opacity: .3; }
.wall-empty { font-family: var(--hand); font-size: 34px; color: var(--ink); opacity: .6; text-align: center; }
.name-card { position: absolute; z-index: 10; width: 260px; background: var(--sheet); box-shadow: var(--shadow-lift); padding: 14px 16px; font-size: 16px; transform: rotate(-1deg); }
.name-card .hand { display: block; font-size: 30px; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.name-card .mono { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }
.name-card p { margin: 0; font-family: var(--hand); font-size: 22px; color: var(--ink-2); line-height: 1.15; }
.name-card .admin { display: flex; gap: 8px; margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .wall-name { animation: none; } }