/* Acids in wine. Everything scoped under .wac-*. */
.wac-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wac-mal circle { fill: #8fd44a; stroke: #3f6e17; stroke-width: 1.5; }
.wac-mal .sp { fill: #d6f06a; stroke: #3f6e17; stroke-width: 1.2; transition: transform .4s; transform-box: fill-box; }
.wac-tar path { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.5; }
.wac-leg { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; font: 700 12.5px var(--sans); color: var(--dim); }
.wac-leg span { display: inline-flex; align-items: center; gap: 5px; }
.wac-leg i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.wac-leg .m { background: #8fd44a; } .wac-leg .l { background: #f3ecd8; }
.wac-leg .t { background: var(--gold); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.wac-leg .d { background: #ffe14d; }
.wac-cork img { max-height: 30vh; }

/* the summer */
.wac-sky { display: block; width: 100%; max-width: 360px; height: auto; overflow: visible; touch-action: none; cursor: grab; --ripe: 0; }
.wac-arc { fill: none; stroke: rgba(252,192,80,.35); stroke-width: 2; stroke-dasharray: 4 6; }
.wac-mo { fill: var(--dim); font: 700 14px var(--sans); text-anchor: middle; }
.wac-sun circle { fill: var(--gold); }
.wac-sun .wac-halo { fill: rgba(252,192,80,.22); }
.wac-skin { fill: color-mix(in srgb, #9bc45a calc((1 - var(--ripe)) * 100%), #7a4a8c); stroke: rgba(0,0,0,.3); stroke-width: 2; opacity: .9; }
.wac-grape.hot .wac-skin { fill: color-mix(in srgb, #9bc45a calc((1 - var(--ripe)) * 100%), #5a2a6c); }
.wac-m { transition: opacity .5s; }
.wac-m.gone { opacity: 0; }
.wac-lab { fill: var(--text); font: 700 13.5px var(--sans); text-anchor: middle; }
.wac-hush { opacity: .45; }

/* flat wine card */
.wac-flat { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 10px 0; }
.wac-gl { width: 88px; height: auto; }
.wac-gl .bowl { fill: rgba(255,255,255,.05); stroke: var(--line-strong); stroke-width: 2.5; }
.wac-gl .stem { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.wac-read { display: flex; flex-direction: column; gap: 8px; }
.wac-read span { font: 600 14px var(--sans); color: var(--dim); background: var(--raised); padding: 7px 12px; border-radius: 12px; }
.wac-read span:first-child { color: var(--text); font-weight: 800; }
.wac-read b { color: var(--text); }

/* the cellar */
.wac-lab2 { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; touch-action: none; }
.wac-bowl { fill: rgba(236,221,160,.16); stroke: var(--line-strong); stroke-width: 2.5; }
.wac-mol { transition: opacity .3s; }
.wac-mol.lac circle { fill: #f3ecd8; stroke: #9a8f70; }
.wac-mol.lac .sp { fill: #f3ecd8; stroke: #9a8f70; }
.wac-mol.lac .sp.r { transform: scale(0); }
.wac-dish { fill: rgba(123,92,253,.12); stroke: rgba(169,155,255,.4); stroke-width: 1.5; stroke-dasharray: 5 4; }
.wac-bug { cursor: grab; }
.wac-hitb { fill: transparent; }
.wac-body { fill: #c77dff; stroke: #6a2fa0; stroke-width: 1.5; }
.wac-bug circle { fill: #3a1060; }
.wac-fl { fill: none; stroke: #c77dff; stroke-width: 2; stroke-linecap: round; }
.wac-bug.eat .wac-body { fill: #e3b8ff; }
.wac-co2 { fill: rgba(255,255,255,.7); }
.wac-di { fill: #ffe14d; stroke: #a8871a; stroke-width: 1; }
.wac-dia { opacity: 0; transition: opacity .4s; }
.wac-sc.dia .wac-dia { opacity: 1; }
.wac-g { width: 100%; max-width: 320px; }
.wac-g .gt i { background: #d6f06a; }

/* the swap */
.wac-swap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 0; }
.wac-eq { display: grid; grid-template-columns: 96px 36px 96px 36px 56px; align-items: center; justify-items: center; }
.wac-eq svg { width: 100%; height: auto; overflow: visible; }
.wac-eq span { font: 800 22px var(--sans); color: var(--dim); }
.wac-eqlab { display: grid; grid-template-columns: 96px 36px 96px 36px 56px; justify-items: center; font: 700 13px var(--sans); color: var(--dim); }

@media (max-height: 700px) {
  .wac-sky { max-width: 290px; }
  .wac-lab2 { max-width: 280px; }
}