/* Sodium chloride lesson. All rules scoped under .nacl-* */
.nacl-sc { width: 100%; display: flex; justify-content: center; }

/* the bench: a beaker with the lump, a jar of gas */
.nacl-bench { width: 100%; max-width: 340px; height: auto; overflow: visible; }
.nacl-glass { fill: rgba(255,255,255,.04); stroke: rgba(220,226,255,.55); stroke-width: 2.5; }
.nacl-water { fill: rgba(90,150,255,.28); }
.nacl-lump { fill: #cfd4de; stroke: #fff; stroke-width: 1; }
.nacl-skate { animation: naclSkate 1.6s ease-in-out infinite alternate; }
@keyframes naclSkate { 0% { transform: translate(-30px, 0) rotate(-8deg); } 50% { transform: translate(6px, -2px) rotate(6deg); } 100% { transform: translate(34px, 0) rotate(-4deg); } }
.nacl-spark { fill: #ffd36b; opacity: 0; animation: naclSpark .7s ease-out infinite; }
.nacl-spark.s2 { animation-delay: .25s; } .nacl-spark.s3 { animation-delay: .5s; }
@keyframes naclSpark { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8); } }
.nacl-bench g.gone { opacity: 0; transition: opacity .2s; }
.nacl-gas { animation: naclDrift 4s ease-in-out infinite alternate; transition: opacity .9s; }
.nacl-gas.g1 { animation-delay: -1.3s; } .nacl-gas.g2 { animation-delay: -2.6s; }
@keyframes naclDrift { from { transform: translate(-6px, 4px); } to { transform: translate(6px, -4px); } }
.nacl-flash { fill: #fff3a8; opacity: 0; }
.nacl-pile { fill: #f4f2ff; opacity: 0; transition: opacity .8s; }
.nacl-lid { fill: rgba(220,226,255,.4); }
.nacl-bench.burn .nacl-flash { animation: naclBurn 1.3s ease-out both; }
@keyframes naclBurn { 0% { opacity: 0; } 12% { opacity: .95; } 40% { opacity: .7; } 100% { opacity: 0; } }
.nacl-bench.burn .nacl-gas { opacity: 0; }
.nacl-bench.done .nacl-pile { opacity: 1; }
.nacl-name { font: 800 15px var(--sans); fill: var(--text); }
.nacl-sub { font: 600 13px var(--sans); fill: var(--dim); }

/* the atoms */
.nacl-atoms { width: 100%; max-width: 340px; height: auto; overflow: visible; touch-action: none; }
.nacl-orbit { fill: none; stroke: rgba(220,226,255,.3); stroke-width: 1.5; stroke-dasharray: 4 5; transition: opacity .5s; }
.nacl-na .nacl-core { fill: #8a63f0; stroke: #c9b6ff; stroke-width: 2; }
.nacl-cl .nacl-core { fill: #3fae5e; stroke: #a6ecb6; stroke-width: 2; }
.nacl-sym { font: 800 20px var(--sans); fill: #fff; }
.nacl-e { fill: var(--gold); stroke: #fff4d6; stroke-width: 1; transition: opacity .5s; }
.nacl-e.fade { opacity: .0; }
.nacl-loose { filter: drop-shadow(0 0 6px rgba(252,192,80,.9)); }
.nacl-slot { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 3 3; animation: naclPulse 1.2s ease-in-out infinite alternate; }
.nacl-slot.gone { display: none; }
@keyframes naclPulse { from { opacity: .4; } to { opacity: 1; } }
.nacl-grab { fill: transparent; cursor: grab; }
.nacl-atoms.stuck .nacl-orbit { opacity: 0; }
.nacl-atoms.stuck .nacl-core { filter: drop-shadow(0 0 10px rgba(123,92,253,.5)); }
.nacl-cap { font: 800 14px var(--sans); fill: var(--dim); }

/* the grid */
.nacl-gridbox { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.nacl-key, .nacl-hand { font: 700 13.5px var(--sans); color: var(--dim); display: flex; align-items: center; gap: 6px; }
.nacl-hand { color: var(--text); padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); }
.nacl-k { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font: 800 13px var(--sans); }
.nacl-k.na { background: #8a63f0; } .nacl-k.cl { background: #3fae5e; width: 24px; height: 24px; }
.nacl-key .nacl-k.cl { margin-left: 10px; }
.nacl-grid { display: grid; grid-template-columns: repeat(5, 48px); grid-auto-rows: 48px; gap: 2px; place-items: center; }
.nacl-ion, .nacl-hole { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font: 800 18px var(--sans); }
.nacl-ion.na, .nacl-hole.filled.na { width: 34px; height: 34px; background: #8a63f0; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.nacl-ion.cl, .nacl-hole.filled.cl { width: 46px; height: 46px; background: #3fae5e; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.nacl-hole { width: 46px; height: 46px; padding: 0; background: rgba(252,192,80,.08); border: 2px dashed var(--gold); cursor: pointer; }
.nacl-hole.filled { border: none; animation: naclPop .3s ease-out; cursor: default; }
.nacl-hole.wrong { border-color: var(--red); }
.nacl-hole.off { opacity: .45; }
@keyframes naclPop { from { transform: scale(.5); } }
@media (max-height: 700px) { .nacl-grid { grid-template-columns: repeat(5, 40px); grid-auto-rows: 40px; } .nacl-ion.cl, .nacl-hole, .nacl-hole.filled.cl { width: 38px; height: 38px; } .nacl-ion.na, .nacl-hole.filled.na { width: 28px; height: 28px; } }

.nacl-art { display: flex; justify-content: center; }
.nacl-art img { width: min(100%, 280px); height: auto; filter: drop-shadow(0 10px 18px rgba(123,92,253,.3)); }
@media (max-height: 700px) { .nacl-art img { width: 200px; } }