/* Brewing lesson. All rules scoped under .bru-* */
.bru-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bru-pot { display: block; width: min(100%, 360px); height: auto; overflow: visible; }
.bru-cap { font: 600 12.5px/1.25 var(--sans); color: var(--dim); text-align: center; }

/* the pot */
.bru-body { fill: #6B4A2E; stroke: #D9975A; stroke-width: 3; }
.bru-rim { fill: #D9975A; }
.bru-potg { cursor: default; }
.bru-mash .bru-potg { cursor: pointer; }
.bru-liq { fill: #3E5F7A; transition: fill 1.2s; }
.bru-sweet .bru-liq { fill: #C47F22; }
.bru-grain { fill: #D9B66A; stroke: #A8853E; stroke-width: 1.2; }
.bru-steam path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .5s; }
.bru-hot .bru-steam path { opacity: 1; animation: bruSteam 1.4s ease-in-out 3 alternate; }
@keyframes bruSteam { to { transform: translateY(-5px); opacity: .5; } }
.bru-stir .bru-gr { animation: bruStir 1.2s cubic-bezier(.4,0,.2,1) 1; transform-box: view-box; transform-origin: 110px 150px; }
@keyframes bruStir { 50% { transform: translateX(14px) rotate(4deg); } }

/* the lens on a grain */
.bru-lens { opacity: 0; transition: opacity .6s; }
.bru-showlens .bru-lens, .bru-showlens .bru-pointer { opacity: 1; }
.bru-pointer { stroke: var(--violet-bright); stroke-width: 2; stroke-dasharray: 4 4; opacity: 0; transition: opacity .6s; }
.bru-lensbg { fill: #1B1F33; }
.bru-lensring { fill: none; stroke: var(--violet-bright); stroke-width: 3.5; filter: drop-shadow(0 0 6px rgba(123,92,253,.6)); }
.bru-link { stroke: var(--gold); stroke-width: 3; transition: opacity .5s; }
.bru-bead { fill: var(--gold); stroke: #8A6420; stroke-width: 1; transition: transform .8s cubic-bezier(.2,.8,.2,1.2); }
.bru-cutall .bru-link { opacity: 0; }
.bru-cuthalf .bru-link { opacity: .45; stroke-dasharray: 11 11; }
.bru-cut { fill: #B79CFF; opacity: 0; transition: opacity .4s; }
.bru-cutters .bru-cut { opacity: 1; }
.bru-lt { font: 700 13px var(--sans); fill: var(--dim); text-anchor: middle; }

/* feeding the yeast */
.bru-drag { cursor: grab; touch-action: none; transition: opacity .3s; }
.bru-grabzone { fill: transparent; }
.bru-dl { font: 700 13px var(--sans); fill: var(--text); }
.bru-gone { opacity: 0; pointer-events: none; }
.bru-yl { opacity: 0; transition: opacity .3s; }
.bru-fed .bru-yl { opacity: 1; }

/* sprouting */
.bru-big { fill: #D9B66A; stroke: #A8853E; stroke-width: 2.5; transition: fill 1s; }
.bru-crease { fill: none; stroke: #A8853E; stroke-width: 2; }
.bru-wet .bru-big { fill: #C9A458; }
.bru-root, .bru-leaf { fill: none; stroke-linecap: round; stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset 1.2s .3s ease-out; }
.bru-root { stroke: #EFE6CF; stroke-width: 3; }
.bru-leaf { stroke: #7CC46A; stroke-width: 5; }
.bru-wet .bru-root, .bru-wet .bru-leaf { stroke-dashoffset: 0; }

/* photos */
.bru-photo img { display: block; max-width: 100%; max-height: 210px; width: auto; height: auto; border-radius: 12px; border: 1px solid var(--line-strong); }

/* the open pot */
.bru-key text { font: 700 13px var(--sans); fill: var(--text); }
.bru-hopkey { opacity: 0; transition: opacity .4s; }
.bru-hops .bru-hopkey { opacity: 1; }
.bru-me { fill: #F4E3B4; stroke: var(--gold); stroke-width: 2; }
.bru-wild { fill: #8E8E96; stroke: #C4C4CC; stroke-width: 1.2; }
.bru-rod { fill: #8FA39A; stroke: #C6D6CE; stroke-width: 1; }
.bru-sug { fill: var(--gold); }
.bru-new { animation: bruIn .35s cubic-bezier(.2,.8,.2,1.5) both; transform-box: fill-box; transform-origin: center; }
@keyframes bruIn { from { transform: scale(0); } }
.bru-eaten { opacity: 0; transition: opacity .3s; }
.bru-dead { opacity: .15; transition: opacity .6s; }
.bru-res { min-height: 22px; font: 800 16px var(--sans); color: var(--text); }
.bru-hopg { opacity: 0; transform: translateY(-40px); transition: opacity .3s, transform .7s cubic-bezier(.3,.7,.2,1.2); }
.bru-hops .bru-hopg { opacity: 1; transform: none; }
.bru-hop { fill: #7CC46A; stroke: #3F7A34; stroke-width: 1.5; }
.bru-hopl { fill: none; stroke: #3F7A34; stroke-width: 1.2; }

/* dishes */
.bru-dish { display: block; width: 100%; max-width: 150px; height: auto; margin: 0 auto; }
.bru-dbig { max-width: 260px; }
.bru-plate { fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.35); stroke-width: 2; }
.bru-agar { fill: #3A3420; }
.bru-dish .bru-me, .bru-dish .bru-wild { stroke-width: 1; }
.bru-pk { width: 100%; }
.bru-pk .choices.bru-two { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 10px; width: 100%; }
.bru-pk .choice { flex: 1 1 0; min-width: 0; max-width: 170px; padding: 8px 6px; min-height: 0; background: transparent; border-color: transparent; box-shadow: none; flex-direction: column; gap: 6px; }
.bru-pk .choice.right { border-color: var(--mint); background: rgba(63,214,154,.08); }
.bru-pk .choice.wrong { border-color: var(--red); background: rgba(216,85,85,.08); }
.bru-pk .bru-cap { color: var(--text); font-weight: 700; font-size: 13.5px; }

@media (max-height: 700px) {
  .bru-pot { width: min(100%, 320px); }
  .bru-photo img { max-height: 170px; }
  .bru-dbig { max-width: 220px; }
}