/* Aroma of wine. Everything scoped under .wa-*. */
.wa-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wa-lb { fill: var(--dim); font: 700 14px var(--sans); text-anchor: middle; }
.wa-lb.dim { fill: var(--faint); font-weight: 600; }
.wa-hit { fill: transparent; cursor: pointer; }
.wa-mol { stroke: rgba(0,0,0,.35); stroke-width: .8; }
.wa-mol.ch { fill: #ff5d7a; } .wa-mol.fr { fill: #7fd7ff; } .wa-mol.pp { fill: #c7a2ff; }

/* the head */
.wa-head { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; }
.wa-face { stroke: rgba(234,227,215,.22); stroke-width: 1.5; }
.wa-duct { fill: none; stroke: #0d1020; stroke-width: 15; stroke-linecap: round; }
.wa-mouth { stroke-width: 17; transition: stroke .5s; }
.wa-head.full .wa-mouth { stroke: #3a0c1c; }
.wa-tongue { fill: #c85a74; }
.wa-patch { fill: #6e6960; transition: fill .4s; }
.wa-glowp { opacity: 0; transition: opacity .5s; }
.wa-head.lit .wa-patch { fill: var(--gold); }
.wa-head.lit .wa-glowp { opacity: 1; }
.wa-route { fill: none; stroke: none; }
.wa-head.doors #wa-front { stroke: rgba(127,215,255,.35); stroke-width: 2; stroke-dasharray: 3 4; }
.wa-head.doors #wa-back { stroke: rgba(255,93,122,.4); stroke-width: 2; stroke-dasharray: 3 4; }
.wa-gbowl { fill: rgba(255,255,255,.05); stroke: var(--line-strong); stroke-width: 2; }
.wa-gwine { fill: #7a1732; transition: opacity .4s; }
.wa-head.full .wa-gwine { opacity: .55; }
.wa-gstem { fill: none; stroke: var(--line-strong); stroke-width: 2.5; stroke-linecap: round; }
.wa-glass { cursor: pointer; }
.wa-pinch rect:not(.wa-hit) { fill: #e8c5a8; stroke: #8a6a55; stroke-width: 1.2; transition: opacity .35s, transform .35s; }
.wa-head.free .wa-pinch rect:not(.wa-hit) { opacity: 0; }
.wa-head.free .wa-pinch { pointer-events: none; }
.wa-row { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; justify-content: center; width: 100%; max-width: 360px; min-height: 30px; }
.wa-rl { font: 700 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); width: 54px; }
.wa-chip { font: 700 12px var(--sans); padding: 3px 6px; border-radius: 999px; color: var(--faint); border: 1px solid var(--line); transition: all .35s; }
.wa-chip.lo { color: var(--text); background: rgba(252,192,80,.14); border-color: rgba(252,192,80,.35); }
.wa-chip.hi { color: var(--mint-ink); background: var(--gold); border-color: var(--gold); }
.wa-chip.sm { color: #2a0610; background: #ff8da1; border-color: #ff8da1; animation: wa-pop .4s cubic-bezier(.34,1.56,.64,1) both; }
.wa-none { font: 600 13px var(--sans); color: var(--faint); font-style: italic; }
@keyframes wa-pop { from { transform: scale(.4); opacity: 0; } }

/* swirl */
.wa-swirl { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; touch-action: none; cursor: grab; }
.wa-sbowl { fill: rgba(255,255,255,.04); stroke: var(--line-strong); stroke-width: 2.5; }
.wa-sstem { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.wa-surf { fill: #9a2342; }
.wa-film { fill: none; stroke: #b02a4c; stroke-width: 16; opacity: 0; }
.wa-ring circle { fill: none; stroke: rgba(252,192,80,.5); stroke-width: 2; stroke-dasharray: 5 7; }
.wa-ring path { fill: none; stroke: rgba(252,192,80,.7); stroke-width: 2.5; stroke-linecap: round; }
.wa-ring { transition: opacity .6s; transform-origin: 150px 140px; animation: wa-spin 2.4s linear 3; }
.wa-swirl.going .wa-ring { opacity: 0; }
@keyframes wa-spin { to { transform: rotate(360deg); } }
.wa-g { width: 100%; max-width: 320px; }
.wa-g .gt i { background: linear-gradient(90deg, #7fd7ff, #ff5d7a); }

/* pepper */
.wa-pep { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; width: 100%; max-width: 360px; row-gap: 4px; }
.wa-shz { width: 78px; height: auto; overflow: visible; }
.wa-gbowl2 { fill: rgba(255,255,255,.05); stroke: var(--line-strong); stroke-width: 2.5; }
.wa-gstem2 { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.wa-pep img { width: 100px; height: auto; filter: drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.wa-mid { width: 100px; height: auto; overflow: visible; }
.wa-q text { fill: var(--faint); font: 800 34px var(--sans); text-anchor: middle; }
.wa-m { opacity: 0; transition: opacity .6s; }
.wa-rot path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; }
.wa-rot circle { fill: var(--gold); }
.wa-mn { fill: var(--gold); font: 700 13px var(--sans); text-anchor: middle; }
.wa-pep.found .wa-m { opacity: 1; }
.wa-pep.found .wa-q { opacity: 0; }
.wa-pep.found .wa-shz, .wa-pep.found img { filter: drop-shadow(0 0 12px rgba(252,192,80,.55)); }
.wa-cap { font: 700 13px var(--sans); color: var(--dim); }

@media (max-height: 700px) {
  .wa-head { max-width: 270px; }
  .wa-swirl { max-width: 230px; }
}