/* Laziness lesson. All rules scoped under .lzy-* */
.lzy-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lzy-sc.lzy-full { flex: 1; min-height: 0; justify-content: center; }

/* the snow park */
.lzy-park { width: 100%; max-width: 380px; flex: 1; min-height: 0; max-height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.lzy-paved { stroke: #b7c4d8; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; opacity: .9; }
.lzy-trail { stroke: #a9b3c4; stroke-width: 16; stroke-linecap: round; opacity: 0; transition: opacity .4s; }
.lzy-print { fill: #6d7a92; opacity: .75; }
.lzy-print.crowd { fill: #8794ab; opacity: .32; }
.lzy-lab { font: 700 19px var(--sans); fill: #2a3248; text-anchor: middle; }
.lzy-lab.dim { fill: #7d8aa3; font-weight: 600; }
.lzy-lab.sign { fill: #fff; font-size: 18px; }
.lzy-walk image { filter: drop-shadow(0 2px 2px rgba(20, 30, 60, .35)); }
.lzy-walk.crowd image { opacity: .92; }
.lzy-walk.c1 image { filter: hue-rotate(140deg) drop-shadow(0 2px 2px rgba(20, 30, 60, .35)); }
.lzy-walk.c2 image { filter: hue-rotate(220deg) drop-shadow(0 2px 2px rgba(20, 30, 60, .35)); }
.lzy-walk.c3 image { filter: hue-rotate(60deg) drop-shadow(0 2px 2px rgba(20, 30, 60, .35)); }
.lzy-walk.gone { opacity: 0; transition: opacity .5s; }
.lzy-walk.home { opacity: .55; transition: opacity .5s; }

/* robot braces */
.lzy-exo img { height: 104px; width: auto; display: block; }
.lzy-curve { width: 100%; max-width: 330px; overflow: visible; }
.lzy-cv { fill: none; stroke: var(--violet-bright); stroke-width: 4; stroke-linecap: round; }
.lzy-dot image { filter: drop-shadow(0 0 4px rgba(252, 192, 80, .8)); }
.lzy-ax { font: 600 14px var(--sans); fill: var(--dim); text-anchor: middle; }
.lzy-ay { text-anchor: start; }
.lzy-key { display: flex; align-items: center; gap: 8px; font: 800 14px var(--sans); color: var(--gold); }
.lzy-key img { width: 22px; height: 26px; object-fit: contain; }

/* bubble deals */
.lzy-jar { display: flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); font: 700 14px var(--sans); color: var(--dim); }
.lzy-jar b { color: var(--gold); font-size: 17px; min-width: 2ch; }
.lzy-jar.bump { animation: lzy-bump .45s ease-out; }
@keyframes lzy-bump { 40% { transform: scale(1.12); } }
.lzy-coin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe6a6, var(--gold) 55%, var(--gold-deep)); box-shadow: 0 0 0 1.5px rgba(0,0,0,.25) inset; }
.lzy-deal { display: flex; gap: 12px; justify-content: center; align-items: flex-start; width: 100%; }
.lzy-sheet { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px 8px; border-radius: 18px; background: var(--surface); border: 2px solid var(--line); transition: opacity .3s, border-color .2s, transform .2s; }
.lzy-sheet.lzy-on { border-color: var(--gold); }
.lzy-sheet.lzy-off { opacity: .3; }
.lzy-pay { display: flex; align-items: center; gap: 5px; font: 700 13px var(--sans); color: var(--dim); }
.lzy-pay b { font: 800 22px var(--sans); color: var(--gold); }
.lzy-wrap { display: grid; gap: 4px; }
.lzy-sheet.small .lzy-wrap { grid-template-columns: 44px; }
.lzy-sheet.big .lzy-wrap { grid-template-columns: repeat(4, 44px); }
.lzy-n { font: 600 12.5px var(--sans); color: var(--faint); }
.lzy-bub { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(214,228,255,.55) 32%, rgba(150,175,230,.35) 70%, rgba(120,140,200,.5)); box-shadow: inset 0 -3px 6px rgba(80, 100, 170, .35), 0 1px 3px rgba(0,0,0,.25); transition: transform .12s; }
.lzy-bub:active { transform: scale(.9); }
.lzy-bub.pop { background: radial-gradient(circle, rgba(150,170,220,.15), rgba(150,170,220,.05)); box-shadow: inset 0 0 0 1.5px rgba(150,170,220,.3); animation: lzy-pop .2s ease-out; }
.lzy-bub:disabled { opacity: 1; }
@keyframes lzy-pop { 0% { transform: scale(1.15); } 100% { transform: scale(.92); } }

/* roommate */
.lzy-cook img { height: 210px; width: auto; display: block; }
@media (max-height: 700px) {
  .lzy-cook img { height: 170px; }
  .lzy-exo img { height: 66px; }
  .lzy-curve { max-width: 270px; }
  .lzy-sc { gap: 6px; }
  .lzy-sheet.big .lzy-wrap { grid-template-columns: repeat(4, 44px); gap: 3px; }
}