/* Sweetness of wine. Everything scoped under .wsw-*. */
.wsw-sc { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* the tank */
.wsw-tank { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.wsw-cubes rect { fill: #fffaf0; stroke: #d9cfb8; stroke-width: 1; transition: opacity .4s, transform .4s; }
.wsw-cubes rect.gone { opacity: 0; }
.wsw-y { opacity: 0; transition: opacity .5s; }
.wsw-tank.has .wsw-y { opacity: 1; }
.wsw-y ellipse, .wsw-y circle { fill: #f6e7c8; stroke: #8a6a3a; stroke-width: 1.5; transition: fill .6s; }
.wsw-tank.on .wsw-yi { animation: wsw-chomp .5s ease-in-out infinite; }
@keyframes wsw-chomp { 50% { transform: scale(1.18) rotate(8deg); } }
.wsw-tank.cold .wsw-y ellipse, .wsw-tank.cold .wsw-y circle { fill: #bfe3ff; stroke: #4c7ea8; }
.wsw-tank.dead .wsw-y ellipse, .wsw-tank.dead .wsw-y circle { fill: #6e6960; stroke: #3e3a35; }
.wsw-b { fill: rgba(255,255,255,.75); animation: wsw-rise 1.4s ease-in forwards; }
@keyframes wsw-rise { to { transform: translateY(-140px); opacity: 0; } }
.wsw-frost { fill: rgba(170,215,255,.28); opacity: 0; transition: opacity .6s; pointer-events: none; }
.wsw-flake { opacity: 0; transition: opacity .6s; }
.wsw-flake path { fill: none; stroke: #e6f4ff; stroke-width: 3.5; stroke-linecap: round; }
.wsw-tank.cold .wsw-frost, .wsw-tank.cold .wsw-flake { opacity: 1; }
.wsw-alc { fill: var(--text); font: 700 14px var(--sans); text-anchor: middle; }
.wsw-bar { fill: var(--raised); stroke: var(--line-strong); stroke-width: 1.5; }
.wsw-fill { fill: #fffaf0; }
.wsw-band { fill: rgba(63,214,154,.28); stroke: var(--mint); stroke-width: 1.5; }
.wsw-coke { stroke: #e0443a; stroke-width: 2.5; stroke-dasharray: 4 3; }
.wsw-tk { fill: #ff7a70; font: 700 13px var(--sans); }
.wsw-tk.band { fill: var(--mint); }
.wsw-num { fill: var(--gold); font: 800 16px var(--sans); text-anchor: middle; }

/* noble rot photo */
.wsw-photo { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wsw-photo img { width: 100%; max-width: 320px; border-radius: 16px; display: block; }
.wsw-photo figcaption { font: 600 13px var(--sans); color: var(--dim); }

/* glasses and the sweetness meter */
.wsw-g { width: 64px; height: auto; display: block; }
.wsw-g .bowl { fill: rgba(255,255,255,.05); stroke: var(--line-strong); stroke-width: 2.5; }
.wsw-g .stem { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.wsw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; max-width: 360px; }
.wsw-one { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wsw-tags { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 700 13px var(--sans); color: var(--dim); }
.wsw-tags .ac { display: inline-flex; align-items: center; gap: 3px; color: #d6f06a; }
.wsw-tags .ac i { width: 12px; height: 12px; border-radius: 50%; background: #d6f06a; display: inline-block; }
.wsw-meter { width: 100%; opacity: .35; transition: opacity .4s; }
.wsw-meter.on { opacity: 1; }
.wsw-track { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, #f0b43a 0%, #f0b43a 30%, var(--mint) 42%, var(--mint) 58%, #d6f06a 70%, #d6f06a 100%); }
.wsw-needle { position: absolute; top: -6px; left: 50%; width: 6px; height: 24px; margin-left: -3px; border-radius: 3px; background: var(--text); box-shadow: 0 0 0 2px var(--bg); transition: left .6s cubic-bezier(.2,.8,.2,1); }
.wsw-meter:not(.on) .wsw-needle { opacity: 0; }
.wsw-zones { display: flex; justify-content: space-between; font: 700 12px var(--sans); color: var(--dim); margin-top: 6px; }
.wsw-solo { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 330px; }
.wsw-solo .wsw-g { width: 84px; }
.wsw-cap { font: 600 13px var(--sans); color: var(--dim); }
.wsw-meter.big .wsw-track { height: 16px; }
.wsw-meter.big .wsw-needle { transition: left .15s; height: 30px; }
.wsw-meter.big .wsw-zones { font-size: 13.5px; }
.wsw-meter[data-z="bal"] .wsw-zones span:nth-child(2) { color: var(--mint); }
.wsw-meter[data-z="syr"] .wsw-zones span:nth-child(1) { color: #f0b43a; }
.wsw-meter[data-z="shp"] .wsw-zones span:nth-child(3) { color: #d6f06a; }

@media (max-height: 700px) {
  .wsw-tank { max-width: 320px; }
  .wsw-photo img { max-width: 260px; }
}

.wsw-tank.in .wsw-num { fill: var(--mint); }
.wsw-tank.in .wsw-band { fill: rgba(63,214,154,.55); }