/* Insect Flight. All rules scoped under .if-* */
.if-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.if-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.if-hero img { width: 100%; max-width: 340px; max-height: 34vh; object-fit: contain; display: block; margin: 0 auto; }
.if-lab { fill: var(--dim); font: 700 13px var(--sans); }

/* the bee on its flower */
.if-meadow { width: 100%; max-width: 380px; display: block; cursor: pointer; touch-action: manipulation; }
.if-sky { fill: #16233A; }
.if-abd { fill: #F2C14E; }
.if-band { fill: none; stroke: #1B1B22; stroke-width: 6; stroke-linecap: round; }
.if-thx { fill: #2B2530; }
.if-head { fill: #1B1B22; }
.if-leg { fill: none; stroke: #1B1B22; stroke-width: 2.5; stroke-linecap: round; }
.if-wing path { fill: rgba(220,236,255,.55); stroke: rgba(240,248,255,.9); stroke-width: 1.2; }
.if-stem { stroke: #4E8A4A; stroke-width: 5; }
.if-pet ellipse { fill: #B784E0; }
.if-mid { fill: #F2C14E; }
.if-count { fill: var(--text); font: 800 18px var(--sans); }
.if-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 380px; }
.if-vs div { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.if-vs b { font: 800 26px var(--sans); color: var(--text); }
.if-vs div:last-child b { color: var(--gold); }
.if-vs span { font-size: 13px; color: var(--dim); }

/* the chest */
.if-chest { width: 100%; max-width: 360px; display: block; overflow: visible; }
.if-shell { fill: #221C2A; stroke: #7A6A8A; stroke-width: 3; }
.if-mus { stroke: #8C4A5A; stroke-width: 12; stroke-linecap: round; transition: stroke .2s; }
.if-vm.on .if-mus { stroke: #FF7A8A; }
.if-lm { fill: #8C4A5A; transition: fill .2s; }
.if-lm.on { fill: #FF7A8A; }
.if-roof { stroke: #D9C7F0; stroke-width: 6; stroke-linecap: round; }
.if-wl, .if-wr { stroke: rgba(220,236,255,.85); stroke-width: 5; stroke-linecap: round; fill: none; }
.if-piv { fill: var(--gold); }
.if-sig { fill: var(--gold); opacity: 0; }
.if-sig.on { animation: ifSig .35s ease-out 1; }
@keyframes ifSig { from { opacity: 1; } to { opacity: 0; } }
.if-chest.buzz .if-wl, .if-chest.buzz .if-wr { filter: blur(1.2px); }
.if-hz { font-size: 15px; color: var(--dim); text-align: center; }
.if-hz b { font: 800 26px var(--sans); color: var(--gold); margin-right: 4px; }

@media (max-height: 700px) {
  .if-hero img { max-height: 28vh; }
  .if-chest { max-height: 170px; }
  .if-hz b { font-size: 22px; }
}