:root {
  --bg1: #cffafe; --bg2: #ecfeff;
  --accent: #0e7490; --accent2: #155e75; --accent-zacht: #cffafe;
}
.wv-opdracht {
  background: #fff; border-radius: 20px; box-shadow: var(--schaduw); padding: 12px 18px;
  text-align: center; position: relative; z-index: 2;
}
.wv-opdracht .soort { font-weight: 900; color: var(--accent); font-size: 17px; text-transform: uppercase; letter-spacing: .5px; }
.wv-opdracht .doel { font-family: var(--lees); font-weight: 700; font-size: 34px; line-height: 1.2; margin-top: 2px; }
.wv-opdracht .doel.def { font-size: 25px; }
.wv-opdracht .doel .gat { display: inline-block; min-width: 3.2em; border-bottom: 4px solid var(--accent); color: var(--accent); }
.wv-weetje { min-height: 30px; text-align: center; font-family: var(--lees); font-size: 18px; color: var(--accent2); margin: 6px 0 4px; }
.wv-weetje b { color: var(--goed); }
.wv-water {
  position: relative; height: 430px; border-radius: 26px; overflow: hidden; touch-action: manipulation;
  background:
    radial-gradient(ellipse at 20% 110%, rgba(255,255,255,.15), transparent 40%),
    linear-gradient(180deg, #38bdf8 0%, #0284c7 35%, #075985 75%, #0c4a6e 100%);
  box-shadow: inset 0 6px 0 rgba(255,255,255,.35), 0 8px 24px rgba(8, 47, 73, .25);
}
.wv-water::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px;
  background: repeating-radial-gradient(circle at 20px -6px, rgba(255,255,255,.55) 0 12px, transparent 13px 40px);
  background-size: 40px 18px; animation: golf 3s linear infinite;
}
@keyframes golf { to { background-position: 40px 0; } }
.wv-bodem { position: absolute; bottom: 0; left: 0; right: 0; height: 34px; background: linear-gradient(#d6b46b, #b58a3e); border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
.wv-plant { position: absolute; bottom: 20px; font-size: 40px; transform-origin: bottom center; animation: wieg 4s ease-in-out infinite; }
@keyframes wieg { 50% { transform: rotate(6deg); } }
.wv-bel { position: absolute; bottom: -20px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); animation: bel 6s linear infinite; }
@keyframes bel { to { transform: translateY(-470px); opacity: 0; } }

.vis {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; cursor: pointer;
  will-change: transform; user-select: none; -webkit-user-select: none;
}
.vis .lijf {
  position: relative; padding: 9px 36px 9px 20px; border-radius: 40px 999px 999px 40px;
  font-family: var(--lees); font-weight: 700; font-size: 23px; color: #0f172a; white-space: nowrap;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.2);
}
.vis .lijf::after { content: ""; position: absolute; right: 16px; top: 11px; width: 9px; height: 9px; border-radius: 50%; background: #0f172a; box-shadow: 0 0 0 3px #fff; }
.vis .staart { width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 26px solid; margin-right: -6px; }
.vis.links { flex-direction: row-reverse; }
.vis.links .lijf { border-radius: 999px 40px 40px 999px; padding: 9px 20px 9px 36px; }
.vis.links .lijf::after { right: auto; left: 16px; }
.vis.links .staart { border-left: 0; border-right: 26px solid; margin-right: 0; margin-left: -6px; }
.vis:hover .lijf { outline: 4px solid rgba(255,255,255,.8); }
.vis.gevangen { transition: transform .45s ease-in, opacity .45s; opacity: 0; }
.vis.mis .lijf { background: #fecaca !important; outline: 4px solid var(--fout); }
.vis.juist .lijf { outline: 4px solid #fde047; }
.wv-lijn { position: absolute; top: 0; width: 3px; background: rgba(255,255,255,.9); transform-origin: top; z-index: 3; pointer-events: none; }
.wv-lijn::after { content: ""; position: absolute; bottom: -10px; left: -6px; width: 10px; height: 12px; border: 3px solid #e2e8f0; border-top: 0; border-radius: 0 0 10px 10px; }
@media (max-width: 560px) {
  .wv-water { height: 400px; }
  .wv-opdracht .doel { font-size: 27px; }
  .wv-opdracht .doel.def { font-size: 19px; }
  .vis .lijf { font-size: 18px; padding: 7px 28px 7px 14px; }
  .vis.links .lijf { padding: 7px 14px 7px 28px; }
  .vis .lijf::after { right: 11px; top: 9px; width: 7px; height: 7px; }
  .vis.links .lijf::after { left: 11px; }
  .vis .staart { border-top-width: 15px; border-bottom-width: 15px; border-left-width: 20px; }
  .vis.links .staart { border-right-width: 20px; }
  .wv-weetje { font-size: 16px; }
}