/* Entropy lesson. All rules scoped under .en-* */

.en-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.en-sc > svg, .en-sc > canvas { display: block; width: 100%; max-width: 340px; height: auto; }
.en-note { font-size: 12px; color: var(--faint); }
.en-tag { font: 600 13px var(--sans); fill: var(--dim); }
.en-hero { width: min(88%, 320px); }
.en-hero img { width: 100%; display: block; }
.en-hero.en-grave { width: min(70%, 250px); }
.en-hero.en-grave img { border-radius: 12px; }

/* the box: the counter stays in the top of the scene, visible while the sheet is up */
.en-lab { width: 100%; max-width: 320px; }
.en-lab canvas { display: block; width: 100%; border-radius: 12px; background: #06080f; border: 2px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.en-lab.hit canvas { border-color: var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.35); }
.en-read { white-space: nowrap; display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.en-read b { font-family: var(--mono); font-size: 14px; color: var(--text); }
.en-again b { color: var(--gold); }
.en-lab.hit .en-again b { text-shadow: 0 0 12px rgba(252,192,80,.7); }

/* sixteen ways, sorting into columns */
.en-ways { overflow: visible; }
.en-tile { transition: transform .8s cubic-bezier(.3,.8,.25,1); }
.en-tile rect { fill: #06080f; stroke: var(--line-strong); stroke-width: 1; }
.en-tile line { stroke: rgba(234,227,215,.28); stroke-width: 1; stroke-dasharray: 2 2; }
.en-cols text { font: 700 13px var(--sans); text-anchor: middle; }
.en-cl { fill: var(--dim); opacity: 0; transition: opacity .4s .5s; }
.en-ways.sorted .en-cl { opacity: 1; }
.en-cn { fill: var(--gold); font-family: var(--mono) !important; font-size: 16px !important; animation: enIn .35s ease-out both; }
@keyframes enIn { from { opacity: 0; transform: translateY(6px); } }

/* more balls */
.en-more { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 7px; }
.en-more svg { display: block; width: 100%; height: auto; border-radius: 12px; background: #06080f; border: 2px solid var(--line); margin-bottom: 4px; }
.en-more svg line { stroke: rgba(234,227,215,.2); stroke-width: 1; stroke-dasharray: 3 4; }
.en-more svg circle { fill: var(--violet-bright); }
.en-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700; color: var(--dim); }
.en-row b { font-family: var(--mono); font-size: 14px; color: var(--text); text-align: right; }
.en-wait { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.en-wait span { font-size: 13px; font-weight: 600; color: var(--dim); line-height: 1.3; }
.en-wait b { font-size: 18px; font-weight: 800; color: var(--gold); line-height: 1.25; }
.en-more.deep .en-wait b { text-shadow: 0 0 12px rgba(252,192,80,.55); }

/* heat */
.en-heat { border-radius: 12px; }

/* the ice cube */
.en-gl { fill: none; stroke: rgba(234,227,215,.55); stroke-width: 3; stroke-linejoin: round; }
.en-drink { fill: rgba(216,85,85,.3); }
.en-ice { fill: rgba(191,227,255,.8); stroke: #fff; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; transition: transform 3.4s ease-in 0.4s, opacity 3.4s ease-in .4s; }
.en-glass.melt .en-ice { transform: scale(.55); opacity: .75; }
.en-sp { fill: var(--gold); transition: transform 1.2s ease-in, opacity .4s ease-in 1s; }
.en-glass.melt .en-sp { opacity: 0; }

/* two films, the scene is the control */
.en-films { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.en-film { display: flex; flex-direction: column; gap: 6px; padding: 6px; min-height: 44px; border-radius: 14px; border: 2px solid var(--violet-bright); background: var(--surface); color: var(--text); font: 700 13px var(--sans); cursor: pointer; transition: border-color .2s, opacity .2s; }
.en-film canvas { display: block; width: 100%; border-radius: 10px; background: #06080f; }
.en-film.right { border-color: var(--mint); }
.en-film.wrong { border-color: var(--red); }
.en-film.off { opacity: .45; }

/* the rule */
.en-law { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 22px 18px; margin-top: 12px; border-radius: 18px; border: 2px solid var(--gold); background: var(--surface); max-width: 320px; }
.en-law b { font-family: var(--serif); font-size: 20px; color: var(--gold); line-height: 1.2; }
.en-law span { font-size: 15px; color: var(--text); }

/* the freezer */
.en-fb { fill: #1A2136; stroke: var(--line-strong); stroke-width: 2; }
.en-fl { stroke: var(--line-strong); stroke-width: 2; }
.en-tray rect { fill: rgba(191,227,255,.8); }
.en-tray path { stroke: #6f8fb0; stroke-width: 1.5; }
.en-coil { fill: none; stroke: #7a8199; stroke-width: 2.5; stroke-linejoin: round; transition: stroke .5s; }
.en-waves path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.en-fridge.hot .en-coil { stroke: var(--red); }
.en-fridge.hot .en-waves path { animation: enRise 1.4s ease-out 2 both; }
.en-fridge.hot .en-waves path:nth-child(2) { animation-delay: .25s; }
.en-fridge.hot .en-waves path:nth-child(3) { animation-delay: .5s; }
@keyframes enRise { 0% { opacity: 0; transform: translateY(12px); } 40% { opacity: 1; } 100% { opacity: .8; transform: translateY(0); } }

.en-sky { border-radius: 12px; background: #06080f; }

@media (max-height: 700px) {
  .en-lab { max-width: 280px; }
  .en-sc > svg, .en-sc > canvas { max-width: 300px; }
  .en-ways { max-width: 290px !important; }
  .en-hero { width: min(70%, 240px); }
  .en-hero.en-grave { width: min(55%, 190px); }
  .en-more svg { max-height: 70px; }
}