/* Glycogen lesson. All rules scoped under .gly-* */

/* ---------- the road ---------- */
.gly-road { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.gly-mile { text-align: center; color: var(--dim); font-weight: 700; font-size: 15px; }
.gly-mile b { font-size: 44px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; transition: color .4s; }
.gly-tired .gly-mile b { color: #FF8A8E; }
.gly-track { position: relative; height: 196px; border-radius: 14px; overflow: hidden; background: linear-gradient(#241F3A, #1A1629 70%); }
.gly-lane { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background-color: #34304A; background-image: linear-gradient(90deg, rgba(252, 192, 80, .7) 0 44px, transparent 44px 110px); background-size: 110px 4px; background-repeat: repeat-x; background-position: 0 50%; }
.gly-run { position: absolute; left: 50%; bottom: 14px; height: 168px; margin-left: -80px; transition: filter .6s; will-change: transform; }
.gly-tired .gly-run { filter: saturate(.5) brightness(.8); }
.gly-gs { display: flex; flex-direction: column; gap: 8px; }
.gly-g { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: var(--dim); }
.gly-g i { display: block; height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; }
.gly-g b { display: block; height: 100%; width: 100%; border-radius: 6px; background: var(--gold); }

/* ---------- the tree ---------- */
.gly-tree { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gly-svg { display: block; width: 100%; height: auto; cursor: pointer; touch-action: manipulation; }
.gly-hex { fill: #6E5A3A; stroke: #FCC050; stroke-width: 1; }
.gly-hex.gly-tip { fill: #FCC050; stroke: #FFE3A3; }
.gly-edge { stroke: rgba(252, 192, 80, .45); stroke-width: 2; }
.gly-ct { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 14px; border-radius: 999px; background: var(--raised); font-size: 14px; font-weight: 700; color: var(--dim); }
.gly-ct b { font-size: 18px; color: var(--gold); font-variant-numeric: tabular-nums; }

.gly-race { width: 100%; max-width: 360px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gly-lane2 { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; background: var(--surface); }
.gly-cap { min-height: 2.5em; display: flex; align-items: center; text-align: center; font-size: 13px; font-weight: 700; color: var(--text); }
.gly-svg2 { display: block; width: 100%; height: auto; max-height: 30vh; }

/* ---------- the stores ---------- */
.gly-stores { display: flex; justify-content: center; align-items: flex-end; gap: 22px; margin: 0 auto; }
.gly-jar { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; border-radius: 16px; }
.gly-jar i { position: relative; display: block; overflow: hidden; border: 2px solid rgba(255, 255, 255, .3); border-radius: 12px 12px 18px 18px; background: rgba(255, 255, 255, .04); transition: box-shadow .3s; }
.gly-jar i b { position: absolute; left: 0; right: 0; bottom: 0; height: 92%; background: linear-gradient(#FCC050, #D9962A); transition: height 1.4s ease-in-out; }
.gly-jl i { width: 76px; height: 70px; }
.gly-jl i b { background: linear-gradient(#E58A6E, #B65A44); }
.gly-jm i { width: 148px; height: 140px; }
.gly-jar span { font-size: 16px; font-weight: 700; }
.gly-jar small { font-size: 13px; color: var(--dim); font-weight: 600; }
.gly-locked .gly-jar { pointer-events: none; }
.gly-jar.gly-right i { box-shadow: 0 0 0 3px #3DDC97; }
.gly-jar.gly-wrong i { box-shadow: 0 0 0 3px #FF6B6B; }
.gly-jar.gly-drain i b { height: 38%; }

/* ---------- the scale ---------- */
.gly-scale { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 auto; }
.gly-stack { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; min-height: 152px; justify-content: flex-start; }
.gly-blk { width: 132px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; transition: opacity .3s, transform .3s; }
.gly-gb { background: var(--gold); color: #2B2000; cursor: pointer; min-height: 44px; }
.gly-wb { background: #4E8FE0; color: #fff; }
.gly-gone { opacity: 0; transform: translateY(-16px); }
.gly-plat { width: 220px; padding: 10px 0; border-radius: 14px; background: #1E1A2E; border: 2px solid rgba(255, 255, 255, .18); display: flex; justify-content: center; }
.gly-read { font-size: 15px; font-weight: 700; color: var(--dim); }
.gly-read b { font-size: 30px; color: #6FE3B2; font-variant-numeric: tabular-nums; }

.gly-art { padding: 14px 0 24px; }
.gly-art img { display: block; width: 240px; max-width: 100%; max-height: 30vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 10px 18px rgba(123, 92, 253, .3)); }

@media (max-height: 700px) {
  .gly-track { height: 160px; }
  .gly-run { height: 136px; margin-left: -65px; }
  .gly-art img { max-height: 26vh; }
  .gly-jm i { width: 128px; height: 120px; }
  .gly-svg2 { max-height: 24vh; }
}