/* Cricket (Insect) lesson. All rules scoped under .crk-* */
.crk-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.crk-note { font-size: 12.5px; color: var(--faint); text-align: center; }

/* the night */
.crk-night { position: relative; flex: 1; width: 100%; min-height: 300px; overflow: hidden; border-radius: 18px 18px 0 0; background: linear-gradient(#070a1c, #141a3a 55%, #1d2340); }
.crk-night.low { min-height: 260px; }
.crk-sky { position: absolute; inset: 0; }
.crk-sky i { position: absolute; border-radius: 50%; background: #fff; opacity: 0; animation: crk-tw 3.2s ease-in-out infinite; }
@keyframes crk-tw { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
.crk-moon { position: absolute; right: 12%; top: 9%; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #fff8e1, #e9dcb0); box-shadow: 0 0 30px 8px rgba(255, 244, 210, .18); }
.crk-grass { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; fill: #0b1a14; }
.crk-grass path { transform-origin: 50% 100%; transform-box: fill-box; animation: crk-sway 4s ease-in-out infinite alternate; }
.crk-grass path:nth-child(3n) { animation-delay: -1.5s; } .crk-grass path:nth-child(3n+1) { animation-delay: -2.7s; }
@keyframes crk-sway { from { transform: rotate(-2deg); } to { transform: rotate(2.5deg); } }

.crk-singer { position: absolute; translate: -50% -50%; z-index: 2; }
.crk-singer > img:first-child { width: 100%; display: block; filter: drop-shadow(0 0 8px rgba(252, 192, 80, .45)) brightness(1.15); transition: filter .5s; }
.crk-singer.flip > img:first-child { transform: scaleX(-1); }
.crk-arcs { position: absolute; left: 32%; top: -40%; width: 40px; height: 40px; pointer-events: none; }
.crk-singer.flip .crk-arcs { left: 52%; }
.crk-arcs i { position: absolute; left: 0; bottom: 0; border: 2.5px solid transparent; border-top-color: var(--violet-bright); border-radius: 50%; opacity: 0; }
.crk-arcs i:nth-child(1) { width: 14px; height: 14px; } .crk-arcs i:nth-child(2) { width: 26px; height: 26px; left: -6px; bottom: -6px; } .crk-arcs i:nth-child(3) { width: 38px; height: 38px; left: -12px; bottom: -12px; }
.sing > .crk-arcs i { animation: crk-arc 1.1s ease-out infinite; }
.sing > .crk-arcs i:nth-child(2) { animation-delay: .12s; } .sing > .crk-arcs i:nth-child(3) { animation-delay: .24s; }
@keyframes crk-arc { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.crk-singer.hit > img:first-child { filter: grayscale(.8) brightness(.55); }
.crk-fly { position: absolute; left: 0; top: 0; width: 46px; height: auto; z-index: 3; transform: translate(-60px, 20px); }
.crk-fly.on { left: 34%; top: -26%; }

/* the wing */
.crk-wing { width: 100%; max-width: 350px; height: auto; touch-action: none; cursor: grab; }
.crk-membrane { fill: rgba(176, 120, 62, .3); stroke: rgba(201, 140, 27, .6); stroke-width: 2; }
.crk-vein { fill: none; stroke: rgba(201, 140, 27, .35); stroke-width: 2; }
.crk-file { fill: #5a3a1d; }
.crk-tooth { fill: #c9852a; transform-box: fill-box; transform-origin: 50% 100%; }
.crk-tooth.hit { animation: crk-tick .25s ease-out; }
@keyframes crk-tick { 0% { fill: var(--gold); transform: scaleY(1.5); } 100% { fill: #c9852a; transform: none; } }
.crk-lab { font: 700 14px var(--sans); fill: var(--dim); }
.crk-lab.gold { fill: var(--gold); }
.crk-scr rect { fill: #3a2414; stroke: var(--gold); stroke-width: 2.5; }
.crk-wing.fast .crk-scr rect { stroke: var(--violet-bright); }

/* her ears */
.crk-bug { position: relative; width: 100%; max-width: 350px; }
.crk-bug img { width: 100%; display: block; }
.crk-spot { position: absolute; translate: -50% -50%; width: 44px; height: 44px; border-radius: 50%; border: 2.5px dashed var(--gold); background: rgba(10, 14, 26, .55); color: var(--gold); font: 800 18px var(--sans); display: grid; place-items: center; padding: 0; transition: background .3s, opacity .3s, border-color .3s; }
.crk-spot.right { border-style: solid; border-color: var(--mint); background: rgba(63, 214, 154, .28); }
.crk-spot.picked { border-color: var(--dim); color: var(--dim); }
.crk-spot.off { opacity: .3; }
.crk-earlab { margin-top: 6px; text-align: center; font: 700 13px var(--sans); color: var(--mint); animation: crk-in .4s ease-out; }
@keyframes crk-in { from { opacity: 0; transform: translateY(6px); } }

/* Kauai */
.crk-read { font: 600 14px var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
.crk-read b { color: var(--text); font-weight: 800; }
.crk-grid { display: grid; grid-template-columns: repeat(5, 62px); gap: 10px 6px; justify-content: center; padding: 16px 10px 8px; border-radius: 16px; background: linear-gradient(#0f1430, #1a2140); }
.crk-cell { position: relative; height: 36px; display: flex; align-items: flex-end; justify-content: center; }
.crk-cell img { width: 54px; transition: filter .4s; }
.crk-cell.flat img { filter: grayscale(.85) brightness(.6); }
.crk-cell .crk-arcs { left: 40%; top: -16px; width: 24px; height: 24px; }
.crk-cell .crk-arcs i:nth-child(2) { width: 22px; height: 22px; left: -4px; bottom: -4px; }
.crk-legend { display: flex; gap: 16px; font: 600 13px var(--sans); color: var(--dim); }
.crk-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.crk-legend .s::before { background: var(--violet-bright); }
.crk-legend .q::before { background: #5a5560; }

/* where to wait */
.crk-stem { position: absolute; left: calc(22% - 2px); top: 36%; bottom: 0; width: 4px; border-radius: 2px; background: linear-gradient(#2c5a3e, #133426); transform: rotate(-4deg); transform-origin: bottom; }
.crk-field { position: relative; width: 100%; max-width: 350px; height: 250px; border-radius: 18px; overflow: hidden; background: linear-gradient(#0c1030, #1b2242 60%, #10261c 60%); }
.crk-turf { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: repeating-linear-gradient(100deg, #0f2a1f 0 5px, #133426 5px 9px); }
.crk-tag { position: absolute; translate: -50% 0; font: 700 13px var(--sans); color: var(--violet-bright); white-space: nowrap; }
.crk-she { position: absolute; left: 88%; top: 70%; width: 58px; translate: -50% -50%; transition: left 1.4s ease-in-out; z-index: 2; }
.crk-she img { width: 100%; display: block; filter: hue-rotate(-25deg) saturate(1.2); }
.crk-she em { position: absolute; left: 50%; top: -18px; translate: -50% 0; font: 700 12px var(--sans); font-style: normal; color: var(--streak); }
.crk-she.walk { left: 64%; }
.crk-seat { position: absolute; translate: -50% -50%; width: 48px; height: 48px; border-radius: 50%; border: 2.5px dashed var(--gold); background: rgba(10, 14, 26, .4); padding: 0; z-index: 3; }
.crk-seat.right { border-style: solid; border-color: var(--mint); }
.crk-seat.picked { border-color: var(--dim); }
.crk-sat { position: absolute; translate: -50% -50%; width: 50px; z-index: 2; pointer-events: none; animation: crk-in .4s ease-out; }
.crk-sat img { width: 100%; display: block; filter: grayscale(.85) brightness(.75); }
.crk-sat.ghost { opacity: .55; }

@media (max-height: 700px) {
  .crk-night { min-height: 240px; }
  .crk-grid { grid-template-columns: repeat(5, 54px); gap: 8px 6px; padding-top: 14px; }
  .crk-cell img { width: 48px; }
  .crk-field { height: 220px; }
}