/* Flow (psychology) lesson. All rules scoped under .flo-* */
.flo-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the dot game */
.flo-pit { position: relative; width: 100%; max-width: 360px; height: 300px; border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(123,92,253,.18), transparent 70%), var(--surface); border: 1px solid var(--line); touch-action: manipulation; }
.flo-score { font: 800 15px var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
.flo-dot { position: absolute; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 45%, var(--gold-deep)); box-shadow: 0 0 18px rgba(252,192,80,.55); animation: floPop .18s ease-out both; }
/* The shrinking ring is the dot's time left. */
.flo-dot::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 3px solid rgba(252,192,80,.75); animation: floLife var(--life) linear both; }
.flo-dot.flo-wait::after { animation: floBreathe 1.2s ease-in-out infinite alternate; }
.flo-dot.hit { animation: floHit .35s ease-out both; pointer-events: none; }
.flo-dot.hit::after, .flo-dot.miss::after { display: none; }
.flo-dot.miss { animation: floMiss .35s ease-in both; pointer-events: none; }
@keyframes floPop { from { transform: scale(.3); opacity: 0; } }
@keyframes floLife { from { transform: scale(1); opacity: 1; } to { transform: scale(.55); opacity: .2; } }
@keyframes floBreathe { to { transform: scale(1.15); opacity: .5; } }
@keyframes floHit { to { transform: scale(1.6); opacity: 0; } }
@keyframes floMiss { to { transform: scale(.4); opacity: 0; filter: grayscale(1); } }

/* the map */
.flo-mapw { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto; }
.flo-map { display: block; width: 100%; height: 100%; overflow: visible; }
.flo-z { stroke: none; }
.flo-zanx { fill: rgba(123,92,253,.16); }
.flo-zbor { fill: rgba(150,150,170,.13); }
.flo-zflow { fill: rgba(252,192,80,.2); }
.flo-axis { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.flo-ax { font: 700 15px var(--sans); fill: var(--dim); text-anchor: middle; }
.flo-zl { font: 800 20px var(--sans); text-anchor: middle; transition: opacity .4s; }
.flo-lanx { fill: var(--violet-bright); }
.flo-lbor { fill: var(--dim); }
.flo-lflow { fill: var(--gold); }
.flo-hid { opacity: 0; }
.flo-pt circle { stroke: var(--bg); stroke-width: 3; }
.flo-pt text { font: 800 14px var(--sans); fill: #1a1530; text-anchor: middle; }
.flo-pt.flo-in circle { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(252,192,80,.8)); }
.flo-pt.flo-anx circle { fill: var(--violet-bright); }
.flo-pt.flo-bor circle, .flo-pt.flo-off circle { fill: #9b98a8; }
.flo-pt.flo-anx text { fill: #fff; }
.flo-drop .flo-ptin { animation: floDrop .45s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes floDrop { from { transform: translateY(-40px); opacity: 0; } }
.flo-slide { transition: transform .9s cubic-bezier(.4,0,.2,1); }
.flo-trail { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.flo-drag { touch-action: none; cursor: ns-resize; }
.flo-me circle { r: 13px; }
.flo-her { font: 800 15px var(--sans); fill: var(--text); text-anchor: middle; }
.flo-leg { align-self: center; text-align: center; font: 600 13px var(--sans); color: var(--dim); margin-top: 6px; }

/* zone names as answers */
.flo-zb { position: absolute; transform: translate(-50%, -50%); min-width: 96px; min-height: 44px; padding: 6px 12px; border-radius: 22px; font: 800 16px var(--sans); color: var(--text); background: var(--raised); border: 2px solid var(--line-strong); cursor: pointer; }
.flo-zb-anx { color: var(--violet-bright); }
.flo-zb-flow { color: var(--gold); }
.flo-zb.right { border-color: var(--mint); color: var(--mint); }
.flo-zb.wrong { border-color: var(--red); color: var(--red); }
.flo-zb.off { opacity: .45; }

.flo-art img { display: block; max-width: 100%; max-height: 240px; margin: 0 auto; filter: drop-shadow(0 12px 22px rgba(123,92,253,.3)); }

@media (max-height: 700px) {
  .flo-pit { height: 250px; }
  .flo-mapw { max-width: 290px; }
  .flo-mapw.flo-small { max-width: 220px; }
  .flo-art img { max-height: 170px; }
}
.flo-mapw.flo-small { max-width: 260px; }