.vd-game-wavelength { --game-color: #3b61c6; }
.wl-game, .wl-board { --wl-ink: #263b58; color: var(--wl-ink); width: 100%; min-width: 0; }
.wl-game { max-width: 760px; margin: 0 auto; }
.wl-board { display: grid; gap: 1rem; margin-top: 1rem; }
.wl-turn { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem .85rem .85rem; border-radius: 16px; background: var(--vd-panel, #fffefa); box-shadow: inset 0 0 0 2px #dfe5f2; }
.wl-turn.is-guess { box-shadow: inset 0 0 0 2px #3b61c6; }
.wl-turn.is-psychic { box-shadow: inset 0 0 0 2px #c74e36; }
.wl-turn.is-done { box-shadow: inset 0 0 0 2px #2b7650; }
.wl-turn-avatar { width: 3.25rem; height: 3.25rem; flex: none; }
.wl-turn-avatar .pr-character { width: 100%; height: 100%; display: block; }
.wl-turn-text { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.wl-turn-text small { font-size: .72rem; font-weight: 650; color: #536582; }
.wl-turn-text strong { font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height: 1.2; font-weight: 750; letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
.wl-chip { flex: none; padding: .3rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 750; background: #e8edf9; color: #3b61c6; }
.wl-turn.is-psychic .wl-chip { background: #fbe6e1; color: #b3412b; }
.wl-turn.is-done .wl-chip { background: #e0f1e8; color: #2b7650; }
.wl-stage { position: relative; padding: 1.25rem 1.25rem 1.25rem; border-radius: 18px; background: #f4eddd; overflow: hidden; }
.wl-from { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .75rem; padding: .25rem .7rem .25rem .3rem; border-radius: 999px; background: #fffefa; font-size: .78rem; font-weight: 700; }
.wl-from-avatar { width: 1.6rem; height: 1.6rem; display: block; }
.wl-from-avatar .pr-character { width: 100%; height: 100%; display: block; }
.wl-dial { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; max-width: 34rem; margin: 0 auto; }
.wl-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 5px #263b581c); }
.wl-points { font: 750 6px system-ui, sans-serif; fill: #263b58; }
.wl-points-4 { fill: #fffefa; }
.wl-needle { filter: drop-shadow(0 2px 1px #263b5829); }
.wl-needle.is-live { cursor: grab; }
.wl-dial:active .wl-needle.is-live { cursor: grabbing; }
.wl-tip { position: absolute; width: 2.3rem; height: 2.3rem; transform: translate(-50%, -50%); filter: drop-shadow(0 3px 4px #263b5826); animation: wl-pop .4s var(--d, .8s) ease-out both; }
.wl-tip .pr-character { display: block; width: 100%; height: 100%; }
.wl-secret { position: absolute; top: -.75rem; right: -.5rem; display: flex; align-items: center; gap: .35rem; padding: .4rem .6rem; border-radius: 8px; background: #fffefa; color: #263b58; font-size: .75rem; font-weight: 700; box-shadow: 0 3px 8px #263b5814; }
.wl-ends { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; max-width: 34rem; margin: .9rem auto 0; }
.wl-ends b { display: flex; align-items: center; gap: .55rem; width: fit-content; max-width: 100%; padding: .7rem .9rem; border-radius: 8px; background: #fffefa; font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; box-shadow: 0 3px 7px #263b5814; }
.wl-ends b::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #3b61c6; flex: none; }
.wl-ends .is-right { justify-self: end; }
.wl-ends .is-right::before { background: #c74e36; }
.wl-bubble { display: inline-flex; gap: .3rem; padding: .7rem .9rem; border-radius: 12px 12px 12px 4px; background: #fffefa; }
.wl-bubble { flex: none; }
.wl-bubble i { width: .4rem; height: .4rem; border-radius: 50%; background: #536582; animation: wl-dot 1.2s ease-in-out infinite; }
.wl-bubble i:nth-child(2) { animation-delay: .15s; }
.wl-bubble i:nth-child(3) { animation-delay: .3s; }
.wl-stage.is-reveal .wl-needle:not(.is-live) { animation: wl-sweep .7s var(--d, 0s) cubic-bezier(.2,.75,.2,1) both; }
.wl-zone { transform-origin: 100px 100px; animation: wl-zone .4s ease-out both; }
.wl-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.wl-confetti i { position: absolute; top: -6%; left: var(--x); width: .55rem; height: .9rem; border-radius: .15rem; background: var(--c); animation: wl-fall 1.9s var(--d) ease-out both; }
.wl-guess { display: grid; gap: .5rem; margin: 0; }
.wl-range { -webkit-appearance: none; appearance: none; width: 100%; height: .5rem; margin: .9rem 0 .6rem; border-radius: 999px; background: #3b61c6; outline-offset: 8px; cursor: pointer; }
.wl-range::-webkit-slider-thumb { -webkit-appearance: none; width: 2rem; height: 2rem; border-radius: 50%; background: #c74e36; border: 3px solid #fffefa; box-shadow: 0 3px 7px #263b5826; cursor: grab; }
.wl-range::-moz-range-thumb { width: 1.65rem; height: 1.65rem; border-radius: 50%; background: #c74e36; border: 3px solid #fffefa; box-shadow: 0 3px 7px #263b5826; cursor: grab; }
.wl-lock { width: 100%; min-height: 52px; border-radius: 12px; justify-content: center; font-size: 1rem; box-shadow: 0 3px 8px #263b5814; }
.wl-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin: 0; }
.wl-player { display: flex; align-items: center; gap: .6rem; padding: .75rem; border-radius: 12px; background: var(--vd-panel); min-width: 0; }
.wl-player.is-psychic { background: #fbf0ec; }
.wl-player.is-acting { box-shadow: inset 0 0 0 2px #3b61c6; background: #eef2fb; }
.wl-player strong { flex: 1; min-width: 0; font-size: .85rem; overflow-wrap: anywhere; }
.wl-player strong small { display: block; font-size: .7rem; color: #3b61c6; margin-top: .15rem; font-weight: 650; }
.wl-avatar { position: relative; width: 2.2rem; height: 2.2rem; flex: none; }
.wl-avatar .pr-character { width: 100%; height: 100%; display: block; }
.wl-avatar i { position: absolute; right: -.25rem; bottom: -.25rem; display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: #2b7650; color: #fff; font-size: .65rem; font-style: normal; font-weight: 900; }
.wl-score { font-size: 1.15rem; font-weight: 800; white-space: nowrap; }
.wl-score b { display: inline-block; margin-left: .25rem; padding: .1rem .35rem; border-radius: 6px; background: #2b7650; color: #fff; font-size: .75rem; }
.wl-game .vd-private-handoff { margin-top: 1rem; }
@keyframes wl-sweep { from { transform: rotate(-90deg); } }
@keyframes wl-zone { from { opacity: 0; } }
@keyframes wl-pop { from { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }
@keyframes wl-dot { 0%,100% { opacity: .4; } 40% { opacity: 1; } }
@keyframes wl-fall { from { transform: translateY(0) rotate(var(--r)); opacity: 1; } to { transform: translateY(26rem) rotate(calc(var(--r) + 540deg)); opacity: 0; } }
@media (max-width: 480px) {
  .wl-turn { gap: .65rem; padding: .7rem .75rem .7rem .7rem; }
  .wl-turn-avatar { width: 2.75rem; height: 2.75rem; }
  .wl-stage { padding: 1rem .75rem; }
  .wl-ends { gap: .5rem; }
  .wl-ends b { padding: .55rem .6rem; font-size: .85rem; }
  .wl-player { padding: .6rem; }
  .wl-secret { top: -.6rem; right: 0; }
}
@media (min-width: 900px) {
  .wl-board-tv .wl-dial, .wl-board-tv .wl-ends { max-width: 44rem; }
  .wl-board-tv .wl-ends b { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wl-tip, .wl-zone, .wl-bubble i, .wl-stage.is-reveal .wl-needle:not(.is-live), .wl-confetti i { animation: none; }
  .wl-confetti { display: none; }
}

/* One phone: the psychic's reveal sits on the dial instead of a separate handoff card. */
.wl-cover { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 1rem; background: #f4eddde6; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.wl-cover .vd-button { min-height: 52px; padding-inline: 1.5rem; border-radius: 12px; font-size: 1rem; box-shadow: 0 3px 8px #263b5826; }