/* Executive Function lesson. All rules scoped under .exf-* */
.exf-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.exf-sign { padding: 8px 20px; border-radius: 22px; background: var(--violet); color: #fff; font: 800 18px var(--sans); letter-spacing: .02em; box-shadow: 0 6px 18px rgba(123,92,253,.35); }
.exf-sign.exf-flip { animation: exfFlip .52s ease-in-out both; }
@keyframes exfFlip { 50% { transform: rotateX(90deg); } }
.exf-sign.exf-pulse { animation: exfPulse .6s ease-out 2; }
@keyframes exfPulse { 50% { transform: scale(1.1); box-shadow: 0 0 26px rgba(252,192,80,.7); } }

.exf-trays { display: flex; gap: 14px; width: 100%; max-width: 340px; }
.exf-tray { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 150px; padding: 12px 8px 10px; border-radius: 20px; cursor: pointer;
  background: linear-gradient(180deg, #c9925a, #9c6a3c); border: 0; box-shadow: inset 0 -6px 0 rgba(0,0,0,.18), 0 10px 20px rgba(0,0,0,.35); transition: filter .3s, opacity .3s; }
.exf-tray:disabled { cursor: default; }
.exf-tray.exf-stop .exf-target { filter: grayscale(.9) brightness(.55); }
.exf-tray.exf-stop { background: linear-gradient(180deg, #7d6a58, #5b4a3b); }
.exf-tray.exf-stop::after { content: ''; position: absolute; inset: 10px; border-radius: 16px; border: 4px solid var(--red);
  background: linear-gradient(45deg, transparent 47%, var(--red) 47%, var(--red) 53%, transparent 53%); opacity: .9; animation: exfIn .3s ease-out both; }
@keyframes exfIn { from { transform: scale(.6); opacity: 0; } }
.exf-card { width: 86px; height: 100px; border-radius: 12px; background: #fdf8ef; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 #e2d6c2, 0 8px 16px rgba(0,0,0,.3); }
.exf-ic { width: 64px; height: 64px; }
.exf-red { fill: #e5484d; }
.exf-blue { fill: #3b82f6; }
.exf-pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 14px; max-width: 120px; }
.exf-chip { width: 14px; height: 14px; border-radius: 4px; animation: exfIn .25s ease-out both; }
.exf-chip.exf-red { background: #e5484d; }
.exf-chip.exf-blue { background: #3b82f6; }

.exf-deck { height: 124px; display: flex; align-items: center; justify-content: center; }
.exf-live { width: 96px; height: 112px; animation: exfDeal .4s cubic-bezier(.2,.9,.3,1.2) both; }
.exf-live .exf-ic { width: 72px; height: 72px; }
@keyframes exfDeal { from { transform: translateY(60px) rotate(8deg); opacity: 0; } }
.exf-live.exf-no { animation: exfNo .42s ease-in-out both; }
@keyframes exfNo { 20% { transform: translateX(-14px) rotate(-4deg); } 40% { transform: translateX(12px) rotate(3deg); } 60% { transform: translateX(-8px); } 80% { transform: translateX(5px); } }
.exf-live.exf-go { transition: transform .32s cubic-bezier(.5,0,.7,.4), opacity .32s; transform: translate(var(--dx), var(--dy)) scale(.4); opacity: .3; animation: none; }

.exf-tight { gap: 8px; }
.exf-tight .exf-deck { height: 112px; }
.exf-sc .exf-deck.exf-gone { height: 0; transition: height .35s ease; }
.exf-pic img { display: block; max-width: 100%; max-height: 280px; margin: 0 auto; filter: drop-shadow(0 12px 22px rgba(123,92,253,.3)); }

.exf-brain { position: relative; width: 100%; max-width: 250px; margin: 0 auto; }
.exf-brain img { display: block; width: 100%; }
.exf-glow { position: absolute; left: 2%; top: 10%; width: 40%; height: 44%; border-radius: 50%; background: radial-gradient(closest-side, rgba(252,192,80,.75), rgba(252,192,80,.25) 60%, transparent); mix-blend-mode: screen; animation: exfGlow 1.6s ease-in-out 3 alternate; }
@keyframes exfGlow { from { opacity: .45; } }
.exf-bl { position: absolute; left: 4%; top: 2%; padding: 4px 10px; border-radius: 10px; background: var(--gold); color: #1a1530; font: 800 14px var(--sans); }

@media (max-height: 700px) {
  .exf-tray { min-height: 128px; }
  .exf-card { width: 72px; height: 84px; }
  .exf-ic { width: 54px; height: 54px; }
  .exf-live { width: 84px; height: 98px; }
  .exf-deck { height: 108px; }
  .exf-tight .exf-deck { height: 98px; }
  .exf-pic img { max-height: 190px; }
  .exf-brain { max-width: 180px; }
  .exf-tight .exf-tray { min-height: 112px; }
}