/* Aluminum lesson. All rules scoped under .alu-* */
.alu-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.alu-l { font: 600 15px var(--sans); fill: var(--text); }
.alu-l.dark { fill: #EAE3D7; }

/* the banquet */
.alu-banq { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; }
.alu-nap { display: block; width: 74%; }
.alu-sets { display: flex; gap: 12px; width: 100%; margin-top: -6px; }
.alu-set { flex: 1; min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); cursor: pointer; }
.alu-set img { width: 64%; }
.alu-set span { font: 700 14px var(--sans); color: var(--text); }
.alu-set.picked { box-shadow: inset 0 0 0 2px var(--violet-bright); }
.alu-banq.told .alu-set:not(.picked) { opacity: .7; }

/* the inventors */
.alu-two { display: flex; gap: 14px; width: 100%; max-width: 320px; }
.alu-two figure { flex: 1; margin: 0; text-align: center; }
.alu-two img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; filter: grayscale(1); }
.alu-two figcaption { margin-top: 6px; font: 700 14px/1.3 var(--sans); color: var(--text); }
.alu-two figcaption span { font-weight: 500; font-size: 13px; color: var(--gold); }

/* the atoms */
.alu-atoms { width: 100%; max-width: 330px; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
.alu-bond { stroke: rgba(234,227,215,.55); stroke-width: 6; stroke-linecap: round; }
.alu-at text { font: 700 15px var(--sans); pointer-events: none; }
.alu-at.a circle { fill: url(#aluAl); }
.alu-at.a text { fill: #1A2136; }
.alu-at.o circle { fill: url(#aluO); }
.alu-at.o text { fill: #fff; }
.alu-grab { cursor: grab; }
.alu-grab circle.alu-hit { fill: transparent; }
.alu-leg { display: flex; gap: 18px; font: 500 13px var(--sans); color: var(--dim); }
.alu-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.alu-leg i.a { background: #c9ced8; } .alu-leg i.o { background: #e2483c; }

/* the pot */
.alu-potwrap { position: relative; width: 100%; max-width: 330px; }
.alu-pot { display: block; width: 100%; overflow: visible; }
.alu-switch { position: absolute; left: calc(292 / 330 * 100% - 26px); top: calc(116 / 240 * 100% - 26px); width: 52px; height: 52px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.alu-lever { stroke: var(--gold); stroke-width: 4; stroke-linecap: round; transform-box: fill-box; transform-origin: 0 100%; transition: transform .25s; }
.alu-pot.on .alu-lever { transform: rotate(-50deg); }
.alu-shell { fill: #2b3142; stroke: #4a5266; stroke-width: 2; }
.alu-bath { fill: #b34d1c; transition: fill .4s; }
.alu-pot.on .alu-bath { fill: #d9661f; }
.alu-pool { fill: #dfe4ec; }
.alu-carbon { fill: #22252e; stroke: #4a5266; stroke-width: 2; }
.alu-wire { fill: none; stroke: #6e6960; stroke-width: 3; stroke-linejoin: round; transition: stroke .3s; }
.alu-pot.on .alu-wire { stroke: var(--gold); filter: drop-shadow(0 0 4px rgba(252,192,80,.7)); }
.alu-batt { fill: #3a2f5e; stroke: var(--violet-bright); stroke-width: 2; }
.alu-pa { fill: #eef1f6; stroke: #7d8594; stroke-width: 1; }
.alu-po { fill: #e2483c; stroke: #8e211a; stroke-width: 1; }
.alu-gas { fill: rgba(234,227,215,.55); animation: aluGas 1.2s ease-out forwards; }
@keyframes aluGas { to { transform: translateY(-60px); opacity: 0; } }
.alu-pl { fill: #1A2136; opacity: 0; transition: opacity .4s; }
.alu-pot.done .alu-pl { opacity: 1; }

/* the cap */
.alu-cap { position: relative; margin: 0; width: 100%; max-width: 300px; }
.alu-cap img { display: block; width: 100%; border-radius: 12px; }
.alu-capring { position: absolute; left: 43%; top: 34%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; box-shadow: 0 0 0 3px var(--gold); }
.alu-tag { position: absolute; right: -6px; bottom: 12px; padding: 8px 12px; border-radius: 12px; background: var(--raised); box-shadow: 0 0 0 2px var(--gold); text-align: center; transition: transform .35s, opacity .35s; }
.alu-tag b { display: block; font: 700 13px var(--sans); color: var(--dim); }
.alu-tag span { display: block; font: 700 28px var(--serif); color: var(--gold); line-height: 1.1; }
.alu-tag i { font: 500 12px var(--sans); color: var(--dim); font-style: normal; }
.alu-tag.drop { transform: translateY(14px); opacity: .2; }

/* the plates */
.alu-plates { width: 100%; max-width: 330px; overflow: visible; }
.alu-scr { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: 0; }
.alu-plates.scratched .alu-scr { opacity: 1; }
.alu-plates.seal .alu-scr.al { stroke: #c4cad4; transition: stroke .5s .2s; }
.alu-rust circle { fill: #b5541f; opacity: .9; }
.alu-rain line { stroke: rgba(169,200,255,.6); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.alu-plates.rain .alu-rain line { animation: aluRain .9s linear infinite; }
@keyframes aluRain { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(170px); opacity: 0; } }

/* the energy bars */
.alu-energy { width: 100%; max-width: 320px; display: flex; gap: 16px; align-items: flex-start; }
.alu-ecol { flex: 1; display: flex; flex-direction: column; gap: 0; }
.alu-ecol b { font: 700 13px var(--sans); color: var(--dim); margin-bottom: 6px; min-height: 18px; }
.alu-seg { display: flex; align-items: flex-start; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 10px; }
.alu-seg i { display: block; width: 44px; flex: none; }
.alu-seg span { font: 600 14px/1.2 var(--sans); color: var(--text); padding-top: 4px; }
.alu-seg.pry { height: 150px; }
.alu-seg.pry i { height: 150px; background: var(--violet); border-radius: 8px 8px 0 0; }
.alu-seg.melt { height: 44px; }
.alu-seg.melt i { height: 9px; background: var(--gold); border-radius: 0 0 4px 4px; }
.alu-seg.melt span { padding-top: 0; }
.alu-seg.picked span { color: var(--violet-bright); }
.alu-oldbar { height: 159px; display: flex; flex-direction: column; justify-content: flex-end; }
.alu-oldbar i { display: block; width: 44px; height: 0; background: var(--gold); border-radius: 4px; transition: height .8s .3s; }
.alu-oldl { font: 600 13px var(--sans); color: var(--gold); opacity: 0; transition: opacity .4s .9s; margin-top: 6px; }
.alu-energy.show .alu-oldbar i { height: 9px; }
.alu-energy.show .alu-oldl { opacity: 1; }

/* the cans */
.alu-cans { width: 100%; max-width: 330px; display: flex; align-items: flex-end; gap: 14px; }
.alu-can { width: 38%; }
.alu-bars { flex: 1; height: 170px; display: flex; align-items: flex-end; gap: 14px; }
.alu-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.alu-bar i { display: block; width: 100%; height: 0; border-radius: 8px 8px 0 0; transition: height 1s cubic-bezier(.2,.8,.2,1); }
.alu-bar.ore i { background: var(--violet); }
.alu-bar.old i { background: var(--gold); }
.alu-bar span { font: 600 13px/1.2 var(--sans); color: var(--text); text-align: center; }
.alu-cans.show .alu-bar.ore i { height: 120px; }
.alu-cans.show .alu-bar.old i { height: 6px; }

@media (max-height: 700px) {
  .alu-banq { max-width: 290px; }
  .alu-nap { width: 58%; }
  .alu-set img { width: 50%; }
  .alu-two { max-width: 250px; }
  .alu-seg.pry, .alu-seg.pry i { height: 120px; }
  .alu-oldbar { height: 129px; }
  .alu-cap { max-width: 230px; }
  .alu-atoms, .alu-pot { max-width: 290px; }
  .alu-bars { height: 140px; }
  .alu-cans.show .alu-bar.ore i { height: 96px; }
}