/* 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-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); }

/* 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; }

@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; }
}