/* Lesson-specific visuals: hero ribbons, the Month Survivor town, coins. */
.hero-art { width: 100%; height: auto; display: block; margin: 56px 0 8px; }

.scene { position: relative; margin: -8px -8px 24px; }
.scene svg { width: 100%; height: auto; display: block; overflow: visible; }
.pl-name { font-family: var(--sans); font-size: 14px; font-weight: 600; fill: var(--ink-2); text-anchor: middle; }
.pl-amt { font-family: var(--serif); font-size: 19px; fill: var(--ink); text-anchor: middle; font-variant-numeric: tabular-nums; }
.place { transition: transform .4s var(--ease); }
.place.hit > *:not(text) { animation: hit .6s var(--ease); transform-box: fill-box; transform-origin: center; }
@keyframes hit { 30% { transform: scale(1.12); } }
.card-place.owing .pl-amt { fill: var(--danger); font-weight: 600; }
.card-place.hit > *:not(text) { animation: shakeit .5s; }
@keyframes shakeit { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
#tree-crown { transition: transform .8s var(--ease); }
#jar-fill { transition: y .8s var(--ease); }
.bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-4px); } }
.eyes { animation: blink 5s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes blink { 0%, 96%, 100% { transform: scaleY(1); } 98% { transform: scaleY(.1); } }
#mouth, #sweat { transition: d .4s var(--ease), opacity .4s; }
.steam { animation: steam 3s ease-in-out infinite; }
@keyframes steam { 50% { transform: translateY(-3px); opacity: .5; } }
#event-pin { transition: opacity .4s; }
#event-pin.on { animation: pin .5s var(--ease); }
@keyframes pin { from { transform: translate(400px, 170px) scale(.4); } }

.coin {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe58a, #e3a91e 70%);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .18), 0 2px 4px rgba(0, 0, 0, .2);
  pointer-events: none; z-index: 5;
}
.coin.red { background: radial-gradient(circle at 35% 35%, #ffb3a8, var(--danger) 70%); }

.week-strip { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.week-strip span {
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  padding: 4px 12px; border-radius: 99px; transition: all .3s var(--ease);
}
.week-strip span.now { background: var(--ink); color: var(--paper); }
.week-strip span.past { color: var(--ink-2); text-decoration: line-through; }

.alloc input[type="range"] { --c: var(--accent); }

@media (max-width: 720px) {
  .pl-name { display: none; }
  .pl-amt { font-size: 30px; transform: translateY(-14px); }
  .scene .roads { display: none; }
  .nature-art text { font-size: 30px; }
  .connect-map { display: none; }
  .connect-list { display: block; }
  .hero-art { margin-top: 36px; }
}