/* Attention economy lesson. Everything scoped under .aec-*. */

/* the day clock */
.aec-clock { -webkit-user-select: none; user-select: none; position: relative; width: min(100%, 320px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.aec-intro { flex: 1; justify-content: center; }
.aec-intro .aec-svg { width: min(100%, 270px); }
.aec-svg { -webkit-user-select: none; user-select: none; width: min(100%, 230px); display: block; overflow: visible; touch-action: none; cursor: grab; }
.aec-sl { fill: none; transition: opacity .4s; }
.aec-sl.sleep { stroke: #4F5D9C; } .aec-sl.school { stroke: #3F7FB8; } .aec-sl.rest { stroke: #3FA889; }
.aec-sl.feed { stroke: var(--violet); filter: drop-shadow(0 0 6px rgba(123,92,253,.7)); }
.aec-intro .aec-sl { animation: aec-sweep .6s both; }
@keyframes aec-sweep { from { opacity: 0; } to { opacity: 1; } }
.aec-tx { font: 700 17px var(--sans); fill: var(--faint); }
.aec-tx:nth-of-type(2) { font: 700 22px var(--mono); fill: var(--dim); }
.aec-handle { fill: var(--gold); stroke: #fff6; stroke-width: 2; filter: drop-shadow(0 0 6px rgba(252,192,80,.8)); }
.aec-intro .aec-handle, .aec-quiet .aec-handle { display: none; }
.aec-took .aec-sl.sleep { stroke: #3B4677; }
.aec-sleep .aec-sl:not(.sleep) { opacity: .35; }
.aec-sleep .aec-sl.sleep { stroke: #6D7DD0; }

.aec-leg { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; }
.aec-lb { display: flex; align-items: center; gap: 6px; font: 600 13px var(--sans); color: var(--dim); }
.aec-lb i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.aec-lb span { flex: 1; }
.aec-lb b { font: 700 13px var(--mono); color: var(--text); }
.aec-lb.feed i { background: var(--violet); } .aec-lb.sleep i { background: #4F5D9C; } .aec-lb.school i { background: #3F7FB8; } .aec-lb.rest i { background: #3FA889; }
.aec-lb.feed b { color: var(--violet-bright); }

.aec-money { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 10px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.aec-money span { font: 600 13px var(--sans); color: var(--dim); }
.aec-money b { font: 700 20px var(--mono); color: var(--gold); }
.aec-money em { grid-column: 1 / -1; font: 500 12px var(--sans); font-style: normal; color: var(--faint); }
.aec-coin { position: absolute; left: 40%; top: 12%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #FFE3A1, var(--gold) 55%, var(--gold-deep));
  box-shadow: 0 0 8px rgba(252,192,80,.7); animation: aec-fall .9s ease-in forwards; pointer-events: none; }
@keyframes aec-fall { from { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } to { opacity: 0; transform: translate(40px, 250px); } }

/* clicks or minutes */
.aec-vids { width: min(100%, 340px); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 6px 2px; }
.aec-vid { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; transition: opacity .3s, border-color .3s, box-shadow .3s; }
.aec-vid img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; display: block; margin-bottom: 2px; }
.aec-vid b { font: 700 13px/1.2 var(--sans); min-height: 32px; }
.aec-vid span { font: 500 12px/1.25 var(--sans); color: var(--dim); }
.aec-vm { font: 700 13px var(--mono); font-style: normal; color: var(--gold); min-height: 16px; }
.aec-vid u { display: block; height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
.aec-vid u i { display: block; width: 0; height: 100%; background: var(--gold); transition: width .6s cubic-bezier(.3,1,.4,1); }
.aec-locked .aec-vid { pointer-events: none; }
.aec-vid.aec-picked { border-color: var(--violet-bright); }
.aec-vid.aec-won { box-shadow: 0 0 0 2px var(--gold); }

/* your two hours */
.aec-two { width: min(100%, 330px); margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.aec-blocks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.aec-bl { min-height: 58px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--dim); font: 600 12px var(--sans); cursor: pointer;
  display: flex; align-items: flex-end; justify-content: center; padding: 6px 2px; position: relative; transition: background .25s, border-color .25s, color .25s; }
.aec-bl.good { background: rgba(63,214,154,.22); border-color: var(--mint); color: var(--text); }
.aec-bl.good::before { content: 'worth it'; position: absolute; top: 8px; left: 0; right: 0; font: 700 12px var(--sans); color: var(--mint); }
.aec-locked .aec-bl { cursor: default; }
.aec-bl.paid { box-shadow: inset 0 0 0 2px var(--gold); }
.aec-bl.paid::after { content: ''; position: absolute; top: -6px; right: -4px; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFE3A1, var(--gold) 55%, var(--gold-deep)); animation: aec-pop .3s both; }
@keyframes aec-pop { from { transform: scale(0); } to { transform: scale(1); } }
.aec-tally { text-align: center; font: 600 14px var(--sans); color: var(--dim); }
.aec-tally b { font: 700 16px var(--mono); color: var(--text); }

@media (max-height: 700px) {
  .aec-svg { width: min(100%, 170px); }
  .aec-intro .aec-svg { width: min(100%, 200px); }
  .aec-vid img { aspect-ratio: 16 / 8; }
  .aec-bl { min-height: 50px; }
}