:root {
  --ink: #080808;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.7);
  --faint: rgba(255, 255, 255, 0.13);
  --violet: #ffffff;
  --violet-hot: #ffffff;
  --cyan: #ffffff;
  --online: #ffffff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
  font-family: "Syne", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
}

.scene,
.scene__image,
.scene__shade,
.scene__grain,
#particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene {
  z-index: -3;
  overflow: hidden;
  background: #050505;
}

.scene__image {
  inset: -3%;
  width: 106%;
  height: 106%;
  background-image: url("assets/huey_4x_dark.gif");
  background-position: center 42%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: contrast(1.06) brightness(0.78);
  transform: scale(1.035);
  transition: filter 900ms ease, transform 1.4s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.scene__shade {
  background:
    radial-gradient(circle at 50% 43%, transparent 10%, rgba(0, 0, 0, 0.13) 54%, rgba(0, 0, 0, 0.58) 112%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.34));
}

.scene__grain {
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}

#particles {
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease 350ms;
}

.entry {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  padding: 40px;
  border: 0;
  place-items: center;
  overflow: hidden;
  color: #fafafa;
  background: rgba(0, 0, 0, 0.73);
  backdrop-filter: blur(5px);
  cursor: pointer;
  transition: opacity 650ms ease, visibility 650ms ease;
}

.entry::before {
  position: absolute;
  inset: -4%;
  content: "";
  background: url("assets/fear-god.gif") center / cover no-repeat;
  filter: grayscale(1) contrast(1.2) brightness(0.82);
  mix-blend-mode: screen;
  opacity: 0.24;
  transform: scale(1.04);
}

.entry::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.035), transparent 30%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.6));
  pointer-events: none;
}

.entry__copy {
  z-index: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.entry__title,
.entry__subtitle,
.entry__hint {
  transition: transform 250ms ease, letter-spacing 250ms ease, text-shadow 250ms ease;
}

.entry__title {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(2.25rem, 6vw, 4.6rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 0.92;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.5),
    0 0 38px rgba(255, 255, 255, 0.2),
    0 10px 34px rgba(0, 0, 0, 0.9);
}

.entry__subtitle {
  margin-top: 20px;
  color: rgba(255, 255, 255, 0.62);
  font-family: "Syne", "Outfit", system-ui, sans-serif;
  font-size: clamp(0.94rem, 1.7vw, 1.2rem);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.9);
}

.entry__fear {
  position: relative;
  display: inline-block;
  isolation: isolate;
  margin: 0 0.08em;
  color: rgba(202, 202, 206, 0.72);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 1em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: inherit;
  text-transform: uppercase;
  text-shadow:
    1px 0 0 rgba(255, 255, 255, 0.08),
    0 6px 15px rgba(0, 0, 0, 0.96);
}

.entry__fear::before,
.entry__fear::after {
  position: absolute;
  inset: 0;
  content: attr(data-text);
  letter-spacing: inherit;
  pointer-events: none;
}

.entry__fear::before {
  z-index: 1;
  color: rgba(8, 8, 11, 0.66);
  clip-path: polygon(
    0 16%, 72% 10%, 72% 20%, 0 29%,
    18% 46%, 100% 39%, 100% 48%, 18% 57%,
    0 76%, 83% 66%, 83% 75%, 0 87%
  );
  transform: translate(1px, 0) skewX(-4deg);
}

.entry__fear::after {
  z-index: 2;
  color: transparent;
  -webkit-text-stroke: 0.45px rgba(218, 218, 220, 0.34);
  clip-path: polygon(
    0 5%, 100% 0, 100% 13%, 0 20%,
    0 48%, 100% 42%, 100% 53%, 0 59%,
    0 82%, 100% 72%, 100% 84%, 0 93%
  );
  transform: translate(-1px, 1px) skewX(3deg);
}

.entry__hint {
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.entry:hover .entry__title {
  letter-spacing: 0.18em;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.74),
    0 0 55px rgba(255, 255, 255, 0.27),
    0 10px 34px rgba(0, 0, 0, 0.9);
  transform: scale(1.015);
}

.entry:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: -8px;
}

.entry.is-gone {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.profile {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100svh;
  padding: 32px;
  place-items: center;
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transition: opacity 750ms ease 160ms, transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 160ms;
}

.profile-stack {
  display: flex;
  width: min(580px, calc(100vw - 40px));
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.identity {
  display: flex;
  width: min(470px, 100%);
  align-items: center;
  gap: 24px;
  filter: drop-shadow(0 20px 42px rgba(0, 0, 0, 0.42));
  transform-style: preserve-3d;
  transition: transform 180ms ease-out;
  will-change: transform;
}

.avatar-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
}

.avatar {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 35px;
  background-image: url("assets/daffy-avatar.gif");
  background-position: center;
  background-size: cover;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.06),
    0 0 28px rgba(255, 255, 255, 0.34),
    0 12px 30px rgba(0, 0, 0, 0.48);
}

.status-dot {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 19px;
  height: 19px;
  border: 4px solid rgba(12, 9, 17, 0.96);
  border-radius: 50%;
  background: var(--online);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.identity__copy {
  min-width: 0;
  padding-top: 2px;
}

.name-row {
  flex-wrap: nowrap;
  display: flex;
  align-items: center;
  gap: 9px;
}

h1 {
  margin: 0;
  color: var(--violet-hot);
  font-size: clamp(2.15rem, 4.5vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  text-shadow:
    0 0 7px rgba(255, 255, 255, 0.86),
    0 0 24px rgba(255, 255, 255, 0.5),
    0 7px 25px rgba(0, 0, 0, 0.82);
}

.verified {
  position: relative;
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  color: var(--cyan);
  cursor: default;
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.7));
  outline: none;
}

.verified::before,
.mail-knop::before {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 5px 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(8, 8, 9, 0.94);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  content: attr(data-tooltip);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px) scale(0.96);
  transform-origin: 50% 100%;
  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.verified::after,
.mail-knop::after {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 5px);
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(8, 8, 9, 0.94);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 2px) rotate(45deg);
  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
}

.verified:hover::before,
.verified:focus-visible::before,
.mail-knop:hover::before,
.mail-knop:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.verified:hover::after,
.verified:focus-visible::after,
.mail-knop:hover::after,
.mail-knop:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) rotate(45deg);
}

.verified:focus-visible {
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.88);
}

.verified svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.verified path:first-child {
  fill: currentColor;
  stroke: currentColor;
  stroke-linejoin: round;
}

.verified__check {
  fill: none;
  stroke: #141414;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-meta {
  display: flex;
  margin-top: 14px;
  align-items: center;
  gap: 7px;
  color: var(--cyan);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}

.profile-meta svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.sigil-row {
  display: flex;
  height: 26px;
  margin-top: 10px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: var(--violet-hot);
}

.wing {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter:
    grayscale(1)
    brightness(1.15)
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.88))
    drop-shadow(0 0 7px rgba(255, 255, 255, 0.28));
}

.discord-mark {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  color: var(--cyan);
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.42));
}

.discord-mark svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.discord-link {
  border-radius: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.discord-link:hover {
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 1))
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.72));
  transform: translateY(-2px) scale(1.08);
}

.discord-link:active {
  transform: translateY(0) scale(0.96);
}

.discord-link:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 5px;
}

/* De envelop-knop staat naast het Discord-teken, tussen de vleugels. Zelfde
   maat en witte neon-gloed als het Discord-teken, zodat het één rij vormt. */
.mail-mark {
  position: relative;
  display: grid;
  width: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--cyan);
  cursor: pointer;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
  filter:
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.92))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.42));
  transition: filter 220ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mail-mark svg {
  width: 26px;
  height: 26px;
  overflow: visible;
}

.mail-mark:hover {
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 1))
    drop-shadow(0 0 15px rgba(255, 255, 255, 0.72));
  transform: translateY(-2px) scale(1.08);
}

.mail-mark:active {
  transform: translateY(0) scale(0.96);
}

.mail-mark:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.95);
  outline-offset: 5px;
}

.music-player {
  position: relative;
  display: flex;
  width: min(560px, 100%);
  min-height: 84px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 22px;
  background: rgba(9, 7, 14, 0.48);
  box-shadow:
    inset 0 0 25px rgba(255, 255, 255, 0.045),
    0 0 28px rgba(255, 255, 255, 0.13),
    0 18px 38px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px);
}

.money-stamp {
  position: absolute;
  z-index: 2;
  top: -17px;
  right: -1px;
  width: 42px;
  height: 42px;
  object-fit: contain;
  pointer-events: none;
  filter:
    hue-rotate(255deg)
    saturate(4)
    brightness(1.34)
    drop-shadow(0 0 4px rgba(83, 255, 107, 0.95))
    drop-shadow(0 0 11px rgba(50, 255, 81, 0.65));
}

.track-art {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 15px;
  place-items: center;
  background:
    linear-gradient(rgba(8, 5, 13, 0.18), rgba(8, 5, 13, 0.42)),
    url("assets/huey_4x_dark.gif") 52% 41% / cover;
}

.play-icon {
  display: grid;
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: rgba(5, 4, 8, 0.58);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.28);
}

.play-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.track-copy {
  min-width: 0;
  flex: 1;
}

.track-copy h2 {
  margin: 0 0 10px;
  color: var(--violet-hot);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-shadow: 0 0 11px rgba(255, 255, 255, 0.48);
}

.timeline {
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr) auto;
  align-items: center;
  gap: 9px;
  color: rgba(237, 230, 255, 0.55);
  font-size: 0.63rem;
}

.timeline__rail {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.timeline__rail i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow: 0 0 9px var(--cyan);
}

.track-volume {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
}

.track-volume svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.sound {
  position: fixed;
  z-index: 3;
  top: 16px;
  left: 16px;
  display: grid;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(5, 5, 6, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.22),
    0 0 18px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(10px) saturate(0.8);
  -webkit-backdrop-filter: blur(10px) saturate(0.8);
  opacity: 0;
  transition: opacity 500ms ease 650ms;
}

.sound svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.is-entered .profile,
.is-entered #particles,
.is-entered .sound {
  opacity: 1;
}

.is-entered .profile {
  transform: translateY(0) scale(1);
}

.is-entered .scene__image {
  filter: contrast(1.08) brightness(0.9);
  transform: scale(1);
}

@media (max-width: 560px) {
  .profile {
    padding: 24px;
  }

  .identity {
    width: auto;
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }

  .profile-stack {
    gap: 16px;
  }

  .avatar-wrap {
    width: 94px;
    height: 94px;
  }

  .name-row,
  .profile-meta {
    justify-content: center;
  }

  .sigil-row {
    justify-content: center;
  }

  .music-player {
    padding: 10px;
    border-radius: 19px;
  }

  .track-art {
    width: 54px;
    height: 54px;
  }

  .scene__image {
    background-position: 53% center;
  }

  .sound {
    top: 14px;
    left: 14px;
    width: 42px;
    height: 42px;
  }
}

/* Exact 1gz-inspired three-panel layout */
.profile {
  padding: 24px 16px;
  perspective: 1100px;
}

.profile-stack {
  position: relative;
  top: 25px;
  display: grid;
  width: min(640px, calc(100vw - 32px));
  gap: 15px;
  align-items: stretch;
  transform-style: preserve-3d;
  transition: transform 180ms ease-out;
  will-change: transform;
}

.glass-panel {
  position: relative;
  overflow: visible;
  width: 100%;
  border: 2px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  background: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(255, 255, 255, 0.018),
    0 20px 50px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(9px) saturate(0.82);
  -webkit-backdrop-filter: blur(9px) saturate(0.82);
  transform: translateZ(0);
}

.glass-panel::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 45%),
    rgba(255, 255, 255, 0.07),
    transparent 64%
  );
  content: "";
  pointer-events: none;
}

.profile-card {
  height: 261px;
  padding: 25px;
}

.hero-avatar {
  position: absolute;
  z-index: 2;
  top: -43px;
  left: 25px;
  width: 118px;
  height: 118px;
}

.hero-avatar::before,
.hero-avatar::after {
  position: absolute;
  inset: -8px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 42px;
  content: "";
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.26));
  pointer-events: none;
  transform: rotate(9deg);
}

.hero-avatar::after {
  inset: -4px -10px -10px -4px;
  border-color: rgba(255, 255, 255, 0.1);
  transform: rotate(-7deg);
}

.hero-avatar .avatar {
  position: relative;
  z-index: 1;
  border-radius: 35px;
}

.hero-avatar .status-dot {
  z-index: 3;
  right: -2px;
  bottom: -2px;
}

.profile-heading {
  position: absolute;
  top: 89px;
  left: 30px;
}

.profile-heading .name-row {
  gap: 9px;
}

.profile-heading h1 {
  color: #fff;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.25;
  text-shadow:
    0 0 7px rgba(255, 255, 255, 0.82),
    0 0 22px rgba(255, 255, 255, 0.38),
    0 7px 25px rgba(0, 0, 0, 0.8);
}

.typed-line {
  min-height: 20px;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1.35;
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.35),
    0 2px 10px rgba(0, 0, 0, 0.75);
}

/* Elk teken krijgt dezelfde breedte. In een proportioneel lettertype schuift de
   hele regel anders bij elk frame heen en weer, en dat oogt onrustig. */
.typed-line .teken {
  display: inline-block;
  width: 0.62em;
  text-align: center;
  transition: opacity 220ms ease, color 220ms ease;
}

.typed-line .teken--vast {
  color: rgba(255, 255, 255, 0.92);
  opacity: 1;
}

.typed-line .teken--ruis {
  color: rgba(255, 255, 255, 0.55);
  opacity: 0.5;
}

/* De doorhaling pas laten zien als de regel echt klopt; over ruis heen ziet
   een streep er kapot uit. */
/* Elk teken is een inline-block, en daar tekent de browser de doorhaling van een
   ouder niet overheen. Daarom de streep zelf zetten. */
.typed-line s {
  position: relative;
  color: inherit;
  text-decoration: none;
}

/* De streep trekt zichzelf van links naar rechts zodra het woord klopt, en gaat
   weer weg als de regel terug in ruis valt. De uiteinden lopen zacht uit, zodat
   hij het woord omsluit in plaats van het af te snijden; iets ingesprongen, want
   de tekenvakjes zijn breder dan de letters zelf. */
.typed-line s::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0.09em;
  left: 0.09em;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 14%,
    rgba(255, 255, 255, 0.95) 86%,
    rgba(255, 255, 255, 0) 100%
  );
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: scaleX(0) translateY(0.04em);
  transform-origin: left center;
  will-change: transform, opacity;
  transition:
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 320ms ease;
}

.typed-line.is-af s::after {
  opacity: 1;
  transform: scaleX(1) translateY(0.04em);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.48);
}

@media (prefers-reduced-motion: reduce) {
  .typed-line s::after {
    transition: opacity 240ms ease;
    transform: none;
  }
}

.typed-line.is-af .teken--vast {
  color: #fff;
}

.typed-cursor {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 7px rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 200ms ease;
}

.typed-line.is-af .typed-cursor {
  opacity: 1;
  animation: typed-cursor-blink 1100ms steps(1, end) infinite;
}

@keyframes typed-cursor-blink {
  50% {
    opacity: 0;
  }
}

.card-stats {
  position: absolute;
  top: 15px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-shadow: 0 0 9px rgba(255, 255, 255, 0.36);
}

.card-stats svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.card-stats .money-stamp {
  position: static;
  width: 31px;
  height: 31px;
  margin-left: 1px;
  object-fit: contain;
  transform: translateY(-1px);
}

.profile-card .sigil-row {
  position: absolute;
  right: auto;
  bottom: 25px;
  left: 50%;
  display: flex;
  height: 40px;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: 17px;
  transform: translateX(-50%);
}

.profile-card .wing,
.profile-card .discord-mark,
.profile-card .discord-mark svg,
.profile-card .mail-mark,
.profile-card .mail-mark svg {
  width: 40px;
  height: 40px;
}

.profile-card .wing {
  filter:
    grayscale(1)
    brightness(1.2)
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.9))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.38));
}

.profile-card .discord-mark,
.profile-card .mail-mark {
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
}

.profile-card .discord-man {
  display: inline-grid;
  width: 29px;
  height: 40px;
  place-items: center;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 25px;
  line-height: 1;
  filter:
    grayscale(1)
    brightness(1.55)
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.84))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.36));
  transform: translateY(1px);
}

.info-card,
.music-player {
  height: 99px;
  min-height: 99px;
  padding: 15px;
}

.info-card {
  display: flex;
  align-items: center;
  gap: 13px;
}

.info-card > :not(.nameplate-media) {
  position: relative;
  z-index: 2;
}

.nameplate-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}

.info-card.has-nameplate .nameplate-media {
  opacity: 0.86;
}

.nameplate-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.06) 70%, rgba(0, 0, 0, 0.16));
  content: "";
}

#nameplate-video,
#nameplate-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Op een breed scherm past de hele banner er netjes in, dus contain. De figuur
     loopt in de bron door tot vier pixels van de rechterrand; daarom rechts
     uitlijnen, want eerder stoppen snijdt haar aan. */
  object-fit: contain;
  object-position: right center;
  background-position: right center;
  background-repeat: no-repeat;
  background-size: contain;
}

#nameplate-video:not([src]),
#nameplate-image:empty {
  display: none;
}

.info-avatar {
  position: relative;
  width: 65px;
  height: 65px;
  flex: 0 0 auto;
}

.info-avatar__image {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 50%;
  background:
    linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.25)),
    url("assets/huey_4x_dark.gif") 52% 41% / cover;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

.info-avatar__decoration {
  position: absolute;
  z-index: 2;
  inset: -8%;
  display: none;
  width: 116%;
  height: 116%;
  object-fit: contain;
  pointer-events: none;
}

.info-avatar__decoration.has-decoration {
  display: block;
}

.info-avatar__merk {
  display: grid;
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 21px;
  height: 21px;
  border: 3px solid #0c0c0c;
  border-radius: 50%;
  place-items: center;
  background: #5865f2;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.info-avatar__merk svg {
  width: 12px;
  height: 12px;
  fill: #fff;
}

.info-copy {
  display: grid;
  gap: 4px;
  font-family: "Outfit", system-ui, sans-serif;
}

.info-copy strong {
  color: #fff;
  font-size: 18.5px;
  font-weight: 550;
  line-height: 1.2;
}

.info-copy__username {
  min-height: 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

.music-player {
  display: flex;
  align-items: center;
  gap: 13px;
  border-radius: 20px;
  background: transparent;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.music-player .track-art {
  width: 65px;
  height: 65px;
  border-radius: 10px;
}

.music-player .track-copy h2 {
  margin: 0 0 7px;
  color: #fff;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
}

.music-player .timeline {
  grid-template-columns: auto minmax(80px, 1fr) auto;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 16.5px;
  font-variant-numeric: tabular-nums;
}

.music-player .timeline__rail {
  height: 2px;
  background: rgba(255, 255, 255, 0.58);
}

.music-player .track-volume {
  width: 92px;
  color: rgba(255, 255, 255, 0.78);
}

.music-player .track-volume svg {
  width: 64px;
  height: 25px;
  fill: none;
  stroke-width: 2;
}

.is-entered .glass-panel {
  animation: glass-enter 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.is-entered .info-card {
  animation-delay: 90ms;
}

.is-entered .music-player {
  animation-delay: 180ms;
}

@keyframes glass-enter {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 560px) {
  .profile-stack {
    top: 8px;
    width: min(100%, 390px);
    gap: 12px;
  }

  .profile-card {
    height: 238px;
  }

  .hero-avatar {
    top: -34px;
    left: 20px;
    width: 94px;
    height: 94px;
  }

  .profile-heading {
    top: 78px;
    left: 20px;
  }

  .profile-heading h1 {
    font-size: clamp(29px, 8vw, 36px);
  }

  .card-stats {
    top: 15px;
    right: 10px;
  }

  .profile-card .sigil-row {
    bottom: 24px;
  }

  .profile-card .wing,
  .profile-card .discord-mark,
  .profile-card .discord-mark svg,
  .profile-card .mail-mark,
  .profile-card .mail-mark svg {
    width: 36px;
    height: 36px;
  }

  .profile-card .discord-man {
    width: 26px;
    height: 36px;
    font-size: 23px;
  }

  .info-card,
  .music-player {
    height: 92px;
    min-height: 92px;
    padding: 12px;
  }

  .info-avatar,
  .music-player .track-art {
    width: 62px;
    height: 62px;
  }

  .card-stats .money-stamp {
    width: 29px;
    height: 29px;
  }

  .music-player .timeline {
    grid-template-columns: auto minmax(45px, 1fr) auto;
    gap: 7px;
    font-size: 11px;
  }

  .music-player .track-volume {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  #particles {
    display: none;
  }

}

/* ---------------------------------------------------------------------------
   Geluidsknop: twee iconen die elkaar afwisselen
   --------------------------------------------------------------------------- */

.sound {
  cursor: pointer;
  transition: opacity 500ms ease 650ms, color 200ms ease, border-color 200ms ease;
}

.sound:hover,
.sound:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.sound .sound__on {
  display: none;
  fill: none;
}

.sound .sound__on path:first-child {
  fill: currentColor;
}

.sound.is-on .sound__off {
  display: none;
}

.sound.is-on .sound__on {
  display: block;
}

.sound[disabled] {
  cursor: default;
  opacity: 0.4 !important;
}

/* ---------------------------------------------------------------------------
   Muziekspeler
   --------------------------------------------------------------------------- */

.track-art {
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background-color: rgba(255, 255, 255, 0.04);
  background-position: center;
  background-size: cover;
  cursor: pointer;
}

.music-player .play-icon__pause {
  display: none;
}

.music-player.is-playing .play-icon__play {
  display: none;
}

.music-player.is-playing .play-icon__pause {
  display: block;
}

.music-player.is-empty .track-art {
  cursor: default;
  opacity: 0.55;
}

.timeline__rail {
  cursor: pointer;
}

.music-player.is-empty .timeline__rail {
  cursor: default;
}

/* ---------------------------------------------------------------------------
   Discord-kaart op smalle schermen
   --------------------------------------------------------------------------- */

@media (max-width: 560px) {
  /* Meer donker achter de tekst, zodat naam en handle leesbaar blijven over de
     nameplate heen. Rechts blijft de figuur zichtbaar. */
  .nameplate-media::after {
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.6) 0%,
      rgba(0, 0, 0, 0.34) 46%,
      rgba(0, 0, 0, 0.06) 74%,
      rgba(0, 0, 0, 0.1) 100%
    );
  }

  .info-card.has-nameplate .nameplate-media {
    opacity: 0.95;
  }

  /* Op een smal scherm oogt de hele banner te klein, dus daar vult hij de kaart.
     Links valt dan een stuk weg, maar dat is het uitgefadede deel. */
  #nameplate-video,
  #nameplate-image {
    object-fit: cover;
    background-size: cover;
  }

  .info-card {
    gap: 11px;
    padding: 12px 14px;
  }

  .info-avatar {
    width: 54px;
    height: 54px;
  }

  .info-copy {
    min-width: 0;
    flex: 1 1 auto;
  }

  .info-copy strong {
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .info-copy__username {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Eigen statusregel onder de Discord-naam */
.info-copy__eigen {
  display: flex;
  gap: 5px;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12.5px;
  line-height: 1.3;
}

.info-copy__eigen[hidden] {
  display: none;
}

.info-copy__eigen img {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: contain;
}

.info-copy__eigen img[hidden] {
  display: none;
}

.info-copy__eigen span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Sleepbare tijdbalk
   --------------------------------------------------------------------------- */

.music-player .timeline__rail {
  position: relative;
  overflow: visible;
  cursor: pointer;
  touch-action: none;
}

/* Onzichtbaar grijpvlak: de balk zelf is maar een paar pixels hoog en dat is
   met een vinger niet te raken. */
.music-player .timeline__rail::before {
  position: absolute;
  top: -11px;
  right: 0;
  bottom: -11px;
  left: 0;
  content: "";
}

.music-player .timeline__rail i {
  position: relative;
  overflow: visible;
  transition: background 160ms ease;
}

/* Het knopje aan het eind van het afgespeelde deel. */
.music-player .timeline__rail i::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  content: "";
  opacity: 0;
  transform: translate(50%, -50%) scale(0.6);
  transition: opacity 160ms ease, transform 160ms ease;
}

.music-player:hover .timeline__rail i::after,
.music-player .timeline__rail.is-sleepend i::after,
.music-player .timeline__rail:focus-visible i::after {
  opacity: 1;
  transform: translate(50%, -50%) scale(1);
}

.music-player .timeline__rail.is-sleepend {
  height: 4px;
}

.music-player .timeline__rail:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 6px;
}

/* Op aanraakschermen is er geen hover, dus daar staat het knopje altijd aan. */
@media (pointer: coarse) {
  .music-player .timeline__rail i::after {
    opacity: 1;
    transform: translate(50%, -50%) scale(1);
  }
}

/* Spaties krijgen hun eigen breedte; die hoeven niet zo breed als een letter. */
.typed-line .teken--spatie {
  width: 0.3em;
}

/* ---------------------------------------------------------------------------
   Rustiger laten bewegen
   --------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
}

/* De kaartenstapel volgde de muis zonder demping en sprong daardoor mee met
   elke kleine beweging. Een korte naloop maakt het vloeiend zonder traag te
   voelen. */
.profile-stack {
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.avatar,
.info-avatar__image,
.track-art {
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 320ms ease;
}

.track-art:hover {
  transform: scale(1.04);
}

.info-avatar__merk {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), background 220ms ease;
}

.info-avatar__merk:hover,
.info-avatar__merk:focus-visible {
  background: #4752c4;
  transform: scale(1.12);
}

.discord-link,
.mail-mark,
.wing,
.verified {
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), filter 280ms ease;
}

.discord-link:hover {
  transform: translateY(-2px) scale(1.06);
}

.music-player,
.info-card,
.profile-card {
  transition: border-color 320ms ease, box-shadow 320ms ease;
}

.timeline__rail i {
  transition: width 120ms linear, background 160ms ease;
}

.timeline__rail.is-sleepend i {
  transition: none;
}

/* Wie liever geen beweging heeft, krijgt die ook niet. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .profile-stack,
  .avatar,
  .info-avatar__image,
  .track-art,
  .discord-link,
  .mail-mark,
  .info-avatar__merk {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Jokerkaartje naast het vinkje
   --------------------------------------------------------------------------- */

.joker {
  height: 30px;
  width: auto;
  margin-left: 3px;
  flex: 0 0 auto;
  /* De tekening is lijnwerk op transparant, dus een zachte gloed in plaats van
     een slagschaduw; dat past bij de rest van de kaart. */
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
  opacity: 0.88;
  transform: rotate(4deg);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 320ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .joker {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Randvulling achter de nameplate
   --------------------------------------------------------------------------- */

/* De banner is veel breder dan hoog en past dus nooit precies in de kaart. Wat
   er boven en onder overblijft vullen we met een uitvergrote, vervaagde kopie
   van het beeld zelf, zodat daar geen donkere balken staan. */
.info-card.has-nameplate .nameplate-media::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: var(--nameplate-vulling, none);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  filter: blur(16px) saturate(1.15) brightness(0.9);
  transform: scale(1.25);
}

/* Het scherpe beeld en de donkere sluier moeten boven de vulling liggen. */
#nameplate-video,
#nameplate-image {
  z-index: 1;
}

.nameplate-media::after {
  z-index: 2;
}

/* ---------------------------------------------------------------------------
   Beelden lastiger mee te nemen
   --------------------------------------------------------------------------- */

/* Dit houdt niemand tegen die weet waar hij moet kijken: alles wat je ziet is
   al gedownload. Het scheelt wel dat je niet per ongeluk of achteloos iets
   wegsleept. */
.scene__image,
.avatar,
.info-avatar__image,
.track-art,
.nameplate-media,
.wing,
.joker,
.money-stamp {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

img {
  -webkit-user-drag: none;
}

/* ---------------------------------------------------------------------------
   Berichten-popout
   De jokerkaart opent dit boven de pagina in plaats van door te sturen naar een
   andere pagina. Waas en paneel komen los binnen: het waas vervaagt erin, het
   paneel schuift een klein stukje omhoog en schaalt aan.
   --------------------------------------------------------------------------- */

.praat-laag {
  position: fixed;
  z-index: 60;
  display: grid;
  inset: 0;
  padding: 20px;
  place-items: center;
}

.praat-laag[hidden] {
  display: none;
}

.praat-laag__waas {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(14px) saturate(0.7);
  background: rgba(4, 4, 6, 0.62);
  opacity: 0;
  transition: opacity 260ms ease;
}

.praat-laag__paneel {
  position: relative;
  display: flex;
  width: min(430px, 100%);
  /* Meegroeien met de inhoud: bij het naamveld is het een klein kaartje, bij een
     lopend gesprek loopt het door tot deze grens. */
  max-height: min(600px, 82dvh);
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: rgba(12, 12, 15, 0.94);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity 240ms ease,
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.praat-laag.is-open .praat-laag__waas {
  opacity: 1;
}

.praat-laag.is-open .praat-laag__paneel {
  opacity: 1;
  transform: none;
}

.praat-sluit {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: grid;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  place-items: center;
  transition: background 160ms ease, color 160ms ease;
}

.praat-sluit:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
}

.praat-sluit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

/* --- Het gesprek zelf --- */

.praat-doos {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  font-family: "Outfit", system-ui, sans-serif;
}

.praat-bol {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background-image: url("assets/daffy-avatar.gif");
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}

.praat-bol--klein {
  width: 38px;
  height: 38px;
}

.praat-aanmeld {
  padding: 30px 26px 26px;
}

.praat-aanmeld[hidden] {
  display: none;
}

.praat-aanmeld__kop {
  display: flex;
  margin-bottom: 24px;
  gap: 13px;
  align-items: center;
}

.praat-aanmeld__kop strong {
  display: block;
  color: #fff;
  font-family: "Syne", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
}

.praat-aanmeld__kop span {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 13px;
}

.praat-veldrij {
  display: block;
}

.praat-veldrij > span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.praat-veld,
.praat-invoer__veld {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
}

.praat-veld:focus,
.praat-invoer__veld:focus {
  border-color: rgba(255, 255, 255, 0.4);
  outline: none;
}

.praat-fout {
  min-height: 20px;
  margin: 8px 0 0;
  color: #ff9a9a;
  font-size: 13.5px;
}

.praat-knop {
  width: 100%;
  margin-top: 8px;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: background 160ms ease;
}

.praat-knop:hover {
  background: rgba(255, 255, 255, 0.16);
}

.praat-vak {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
}

.praat-vak[hidden] {
  display: none;
}

.praat-vak__kop {
  display: flex;
  padding: 15px 52px 15px 18px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.praat-vak__wie strong {
  display: block;
  color: #fff;
  font-family: "Syne", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.praat-vak__wie span {
  display: block;
  color: rgba(255, 255, 255, 0.34);
  font-size: 12.5px;
}

.praat-rol {
  min-height: 210px;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  scrollbar-width: thin;
}

.praat-rol::-webkit-scrollbar {
  width: 8px;
}

.praat-rol::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  background-clip: content-box;
}

.draad {
  display: flex;
  padding: 18px 16px 24px;
  flex-direction: column;
  gap: 14px;
}

.draad__leeg {
  margin: auto;
  padding: 40px 20px;
  color: rgba(255, 255, 255, 0.34);
  font-size: 13.5px;
  text-align: center;
}

.regel {
  display: flex;
  max-width: 80%;
  flex-direction: column;
  gap: 5px;
  /* Elk nieuw berichtje komt van onderen aanzweven. */
  animation: regel-erin 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.regel--ik {
  align-self: flex-start;
}

.regel--jij {
  align-self: flex-end;
  align-items: flex-end;
}

@keyframes regel-erin {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.regel__wie {
  display: flex;
  gap: 8px;
  align-items: center;
  color: rgba(255, 255, 255, 0.34);
  font-size: 11.5px;
}

.regel__wie b {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

.wolkje {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.regel--ik .wolkje {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-left-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.regel--jij .wolkje {
  border-bottom-right-radius: 5px;
  background: rgba(255, 255, 255, 0.92);
  color: #0a0a0c;
}

.regel--wacht .wolkje {
  opacity: 0.5;
}

.praat-invoer {
  display: flex;
  padding: 12px;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.praat-invoer__veld {
  min-width: 0;
  flex: 1;
}

.praat-invoer__stuur {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #0a0a0c;
  cursor: pointer;
  place-items: center;
  transition: opacity 160ms ease, transform 160ms ease;
}

.praat-invoer__stuur:hover:not([disabled]) {
  transform: scale(1.05);
}

.praat-invoer__stuur[disabled] {
  cursor: default;
  opacity: 0.3;
}

.praat-invoer__stuur svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

@media (max-width: 480px) {
  .praat-laag {
    padding: 12px;
  }

  .praat-laag__paneel {
    max-height: min(660px, 88dvh);
  }

  .regel {
    max-width: 86%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .praat-laag__waas,
  .praat-laag__paneel {
    transition: opacity 160ms ease;
  }

  .praat-laag__paneel {
    transform: none;
  }

  .regel {
    animation: none;
  }
}

/* --- Foto's in het gesprek --- */

.praat-invoer__foto {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  place-items: center;
  transition: background 160ms ease, color 160ms ease;
}

.praat-invoer__foto:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.praat-invoer__foto svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

/* Terwijl de foto onderweg is pulseert de knop rustig. */
.praat-invoer__foto.is-bezig {
  animation: foto-bezig 900ms ease-in-out infinite;
  pointer-events: none;
}

@keyframes foto-bezig {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.wolkje--foto {
  padding: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.wolkje--foto img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  border-radius: 12px;
  object-fit: cover;
}

.regel--jij .wolkje--foto {
  background: rgba(255, 255, 255, 0.14);
}

.praat-melding {
  margin: 0;
  padding: 8px 16px 0;
  color: #ffcf8b;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 12.5px;
  text-align: center;
}

.praat-melding[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .praat-invoer__foto.is-bezig {
    animation: none;
    opacity: 0.5;
  }
}