/* Kimchi lesson. All rules scoped under .kmc-* */
.kmc-one { display: flex; justify-content: center; }
.kmc-jar svg { width: 100%; height: auto; display: block; overflow: visible; }
.kmc-big { width: 170px; }
.kmc-mid { width: 140px; }
.kmc-sm { width: 78px; }
.kmc-glass { fill: rgba(255,255,255,.04); stroke: var(--line-strong); stroke-width: 2.5; stroke-linejoin: round; }
.kmc-neck { fill: none; stroke: var(--line-strong); stroke-width: 2.5; }
.kmc-lid { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1.5; }
.kmc-lidp { transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s; transform-box: fill-box; }
.kmc-open .kmc-lidp { transform: translate(40px, -46px) rotate(24deg); opacity: 0; }
.kmc-brine { fill: #c9d98f; opacity: .35; transition: fill .8s, opacity .8s; }
.kmc-leaf { fill: #dbe8b0; stroke: #a9bf6c; stroke-width: 1.2; transition: fill .9s, stroke .9s; }
.kmc-rotten .kmc-leaf { fill: #8a7350; stroke: #5e4c33; }
.kmc-rotten .kmc-brine { fill: #6e5f44; opacity: .55; }
.kmc-sour .kmc-leaf { fill: #e6e39a; stroke: #b9b45a; }
.kmc-sour .kmc-brine { fill: #e2d77a; opacity: .45; }
.kmc-red .kmc-leaf { fill: #e8664a; stroke: #b3402b; }
.kmc-red .kmc-brine { fill: #d9533a; opacity: .5; }

/* bacteria: one slot shows one kind */
.kmc-s .kmc-rot, .kmc-s .kmc-ac, .kmc-s .kmc-lt { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .25s, transform .25s, fill .4s; }
.kmc-rot { fill: #8f9a8c; stroke: #3d4a3c; stroke-width: 1; }
.kmc-ac { fill: var(--gold); stroke: var(--gold-deep); stroke-width: 1; }
.kmc-lt { fill: #7a3510; stroke: #ffe2b8; stroke-width: 1.4; }
.kmc-rk .kmc-rot, .kmc-ak .kmc-ac, .kmc-lk .kmc-lt { opacity: 1; transform: none; }
.kmc-xk .kmc-rot { opacity: .45; transform: scale(.7); fill: #4a4a4a; stroke: #2b2b2b; }
.kmc-drop .kmc-rk .kmc-rot { animation: kmcIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes kmcIn { from { transform: translateY(-60px); opacity: 0; } }

.kmc-bub circle { fill: rgba(255,255,255,.7); opacity: 0; }
.kmc-busy .kmc-bub circle { animation: kmcRise var(--d) linear infinite; animation-delay: var(--o); }
.kmc-open .kmc-bub circle { animation-duration: calc(var(--d) * .45); }
@keyframes kmcRise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-128px); opacity: 0; } }

/* the leaf close-up */
.kmc-leafbig { width: 100%; max-width: 320px; height: auto; display: block; }
.kmc-leafp { fill: #dbe8b0; stroke: #a9bf6c; stroke-width: 2; }
.kmc-vein { fill: none; stroke: #b9cc7e; stroke-width: 2; stroke-linecap: round; }
.kmc-dots > * { animation: kmcPop .4s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--k) * 22ms + 200ms); transform-box: fill-box; transform-origin: center; }
@keyframes kmcPop { from { transform: scale(0); opacity: 0; } }

.kmc-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 13px; font-weight: 700; color: var(--dim); margin-top: 8px; }
.kmc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.kmc-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.kmc-dr { background: #8f9a8c; border: 1px solid #3d4a3c; border-radius: 6px / 4px !important; width: 15px !important; }
.kmc-da { background: var(--gold); }
.kmc-dl { background: #7a3510; box-shadow: 0 0 0 1.5px #ffe2b8; border-radius: 3px !important; width: 16px !important; height: 7px !important; }

/* the salt game */
.kmc-row { display: flex; gap: 16px; align-items: center; justify-content: center; }
.kmc-jcol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kmc-day { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--dim); }
.kmc-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; width: 150px; }
.kmc-shaker { display: flex; align-items: center; gap: 8px; min-width: 104px; min-height: 64px; padding: 6px 12px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line-strong); color: var(--text); font: 700 15px var(--sans); }
.kmc-shaker:disabled { opacity: .55; }
.kmc-shaker svg { width: 34px; height: 46px; }
.kmc-sh { fill: #f4f1ea; stroke: #9a948a; stroke-width: 2; }
.kmc-cap { fill: #c7ccd4; stroke: #8a909a; stroke-width: 2; }
.kmc-shaker circle { fill: #8a909a; }
.kmc-shake { animation: kmcShake .5s ease-in-out; }
@keyframes kmcShake { 25% { transform: rotate(-24deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-18deg); } }
.kmc-salted svg { animation: kmcSalt .7s ease-out; }
@keyframes kmcSalt { 30% { filter: brightness(1.35); } }
.kmc-read { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--text); }
.kmc-out { min-height: 34px; }
.kmc-tag { display: inline-block; padding: 6px 10px; border-radius: 10px; font-size: 14px; font-weight: 800; background: var(--raised); color: var(--text); animation: kmcPop .35s cubic-bezier(.2,.8,.2,1); }
.kmc-tag.kmc-bad { background: #5e4c33; color: #f1dfc0; }
.kmc-tag.kmc-good { background: var(--gold); color: #1b1300; }
.kmc-tag.kmc-meh { background: var(--surface); color: var(--dim); }
.kmc-note { font-size: 12px; color: var(--faint); text-align: center; margin-top: 8px; }

/* three jars */
.kmc-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; justify-items: center; }
.kmc-mini { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.kmc-mini .kmc-tag { font-size: 12px; padding: 4px 8px; }

/* meters */
.kmc-meter { width: 100%; }
.kmc-meter span { font-size: 13px; font-weight: 700; color: var(--dim); }
.kmc-meter i { display: block; height: 12px; border-radius: 999px; background: var(--raised); overflow: hidden; margin-top: 4px; }
.kmc-meter b { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--gold); transition: width .15s; }
.kmc-mf b { background: var(--mint); }
.kmc-ms b { background: var(--gold); }
.kmc-taste { font-size: 15px; font-weight: 800; color: var(--text); min-height: 40px; }
.kmc-lg2 { margin-top: 4px; }

/* the weeks track */
.kmc-track { position: relative; margin: 14px 14px 0; padding: 14px 0 0; touch-action: none; cursor: pointer; }
.kmc-rail { height: 10px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.kmc-rail i { display: block; height: 100%; width: 0; background: var(--violet); }
.kmc-knob { position: absolute; top: 5px; left: 0; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: var(--gold); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); }
.kmc-ticks { display: flex; justify-content: space-between; margin: 10px -14px 0; font-size: 12px; font-weight: 700; color: var(--faint); }
.kmc-ticks span { width: 52px; text-align: center; transition: color .2s; }
.kmc-ticks .kmc-on { color: var(--text); }

/* pick a jar */
.kmc-pick .kmc-jars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kmc-pick .choice { padding: 8px 4px; }
.kmc-pj { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.kmc-pj b { font-size: 15px; }
.kmc-pj .kmc-sm { width: 70px; }

.kmc-astro { display: flex; justify-content: center; }
.kmc-astro img { width: 100%; max-width: 300px; max-height: 210px; object-fit: contain; }

@media (max-height: 700px) {
  .kmc-big { width: 140px; }
  .kmc-mid { width: 112px; }
  .kmc-sm { width: 64px; }
  .kmc-pj .kmc-sm { width: 58px; }
  .kmc-leafbig { max-width: 280px; }
  .kmc-shaker { min-height: 54px; }
  .kmc-astro img { max-height: 170px; }
}