/* Iodised salt lesson. All rules scoped under .ios-* */
.ios-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ios-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }

/* 0. the draft line */
.ios-full { flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; padding: 8px 14px 16px; }
.ios-line { width: 100%; max-width: 380px; height: auto; }
.ios-wall { fill: #2b2440; }
.ios-man { animation: iosIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes iosIn { from { opacity: 0; translate: 0 8px; } }
.ios-coat { fill: #7d7a52; }
.ios-hair { fill: #3b2a20; }
.ios-eye { fill: #2a1d18; }
.ios-swell { stroke: rgba(80,40,20,.4); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 30%; scale: .2; transition: scale 1.4s cubic-bezier(.3,.7,.3,1); }
.swollen .ios-swell { scale: 1; }

/* 1. the neck */
.ios-neck { display: block; width: 100%; max-width: 300px; height: 250px; border-radius: 18px; background: #2b2440; }
.ios-key { display: flex; gap: 14px; font: 700 12.5px var(--sans); color: var(--dim); }
.ios-key span { display: flex; align-items: center; gap: 5px; }
.ios-key i { width: 10px; height: 10px; border-radius: 50%; }
.ios-k-i { background: #9b7bff; }
.ios-k-h { background: #fcc050; }
.ios-k-t { background: #c94f63; border-radius: 3px !important; }

/* 2. coast to valley */
.ios-land { width: 100%; max-width: 360px; height: auto; touch-action: none; cursor: grab; }
.ios-sea { fill: #3d78a8; }
.ios-wave { fill: none; stroke: #9cc8ea; stroke-width: 2.5; }
.ios-ground { fill: #6b5a3c; }
.ios-mtn { fill: #5b5e70; }
.ios-ice { fill: #e8f2ff; }
.ios-cloud ellipse { fill: #cfd6e4; }
.ios-rain line { stroke: #9b7bff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 5; animation: iosRain .8s linear 6; }
@keyframes iosRain { to { stroke-dashoffset: -16; } }
.ios-soil circle { fill: #9b7bff; }
.ios-barn { fill: #c8553d; }
.ios-roof { fill: #7a2f22; }
.ios-field { fill: #e2b84a; }
.ios-knob { fill: transparent; }
.ios-t { font: 700 14px var(--sans); fill: var(--text); text-anchor: middle; }
.ios-gauge { width: 100%; max-width: 330px; }
.ios-gauge .gt i { background: #9b7bff; }
.ios-scrub { position: absolute; width: 1px; height: 1px; left: 0; top: 0; opacity: 0; pointer-events: none; }

/* 3. two towns */
.ios-towns { width: 100%; }
.ios-towns .choice img { width: 100%; max-width: 140px; height: auto; }

/* 4 and 5. the fix */
.ios-art { width: 100%; max-width: 300px; height: auto; }
.ios-stamp { position: relative; width: 100%; max-width: 320px; }
.ios-stamp img { display: block; width: 100%; transition: scale .8s; }
.ios-date { position: absolute; left: 4px; top: 4px; padding: 6px 12px; border-radius: 10px; border: 2px solid var(--gold); background: rgba(20,16,32,.85); rotate: -4deg; }
.ios-date b { display: block; font: 800 17px var(--sans); color: var(--gold); }
.ios-date span { font: 600 12px var(--sans); color: var(--dim); }
.ios-tiny img { scale: .92; }

/* 6. before and after */
.ios-brothers { display: flex; gap: 14px; }
.ios-bro { width: 140px; padding: 14px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.ios-bro b { display: block; font: 800 15px var(--sans); color: var(--text); }
.ios-bro span { font: 700 13px var(--sans); color: var(--dim); }
.ios-bro.up { border-color: var(--gold); }
.ios-bro.up span { color: var(--gold); }

/* 8. the shelf */
.ios-shelf { width: 100%; }
.ios-shelf .choices.two { display: flex; flex-direction: row; justify-content: center; gap: 14px; }
.ios-shelf .choice { width: 140px; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; }
.ios-shelf .choice b { font: 800 14px var(--sans); }
.ios-shelf .choice small { font: 600 12px var(--sans); color: var(--dim); }
.ios-jar { position: relative; display: block; width: 66px; height: 80px; margin-bottom: 4px; border-radius: 10px 10px 16px 16px; border: 3px solid rgba(255,255,255,.45); overflow: hidden; }
.ios-jar i { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; }
.ios-jar.plain { border-color: #3b6fd0; }
.ios-jar.plain i { background: radial-gradient(circle at 30% 30%, #fff 0 1.5px, transparent 2px) 0 0 / 6px 6px, #eef0f4; }
.ios-jar.sea i { background: radial-gradient(circle at 30% 30%, #fff 0 2.5px, transparent 3px) 0 0 / 9px 9px, #d8dde4; }

@media (max-height: 700px) {
  .ios-neck { height: 200px; }
  .ios-land { max-width: 320px; }
  .ios-art, .ios-stamp { max-width: 260px; }
  .ios-towns .choice img { max-width: 116px; }
}