/* Attention span lesson. All rules scoped under .atn-* */
.atn-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.atn-cap { margin: 0; font: 700 12.5px var(--sans); color: var(--dim); text-align: center; }

/* the claim: bowl and two stopwatches */
.atn-claim { position: relative; width: 100%; height: 100%; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; box-sizing: border-box; }
.atn-bowl { display: block; width: 72%; max-width: 300px; height: auto; filter: drop-shadow(0 14px 26px rgba(252,192,80,.22)); }
.atn-watches { display: flex; gap: 14px; justify-content: center; width: 100%; }
.atn-watch { display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: 8px 14px 10px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); transition: border-color .3s, box-shadow .3s; }
.atn-watch span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .07em; }
.atn-watch b { font: 800 34px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.atn-watch b small { font-size: 16px; color: var(--dim); margin-left: 2px; }
.atn-watch.done.atn-you { border-color: var(--violet-bright); box-shadow: 0 0 18px rgba(123,92,253,.4); }
.atn-watch.done.atn-gf { border-color: var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.4); }
.atn-watch.done.atn-gf b { color: var(--gold); }
.atn-mini { min-height: 0; height: auto; padding: 0; }
.atn-mini .atn-bowl { width: 54%; max-width: 210px; }
.atn-claim.atn-void .atn-watch { border-style: dashed; border-color: var(--line-strong); box-shadow: none; transition: opacity .5s, border-color .5s; opacity: .45; }
.atn-claim.atn-void .atn-watch b { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 2px; }

/* the clock */
.atn-clock { position: relative; display: block; width: 240px; height: 240px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.atn-clock:disabled { cursor: default; }
.atn-clock svg { display: block; width: 100%; height: 100%; overflow: visible; }
.atn-face { fill: var(--surface); stroke: var(--line-strong); stroke-width: 3; transition: stroke .2s, fill .2s; }
.atn-dots circle { fill: var(--dim); }
.atn-hand line { stroke: var(--gold); stroke-width: 6; stroke-linecap: round; }
.atn-hand circle { fill: var(--gold); }
.atn-clock.hit .atn-face { animation: atnHit .6s ease-out; }
.atn-clock.miss .atn-face { animation: atnMiss .6s ease-out; }
.atn-clock.off { animation: atnShake .25s ease-out; }
@keyframes atnHit { 0% { fill: rgba(63,214,154,.35); stroke: var(--mint); } }
@keyframes atnMiss { 0% { stroke: var(--red); } }
@keyframes atnShake { 30% { translate: -4px 0; } 70% { translate: 4px 0; } }
.atn-clock.atn-small { width: 132px; height: 132px; }
.atn-tally { font: 700 14px var(--sans); color: var(--dim); }
.atn-tally b { font: 800 18px var(--sans); color: var(--mint); font-variant-numeric: tabular-nums; }

/* pictures */
.atn-pic { display: block; width: 100%; max-width: 380px; height: auto; max-height: 300px; object-fit: contain; border-radius: 14px; }

/* two hours: bars per half hour */
.atn-bars { width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.atn-bars p { margin: 0; font: 700 12.5px var(--sans); color: var(--dim); }
.atn-bars small { font: 600 12px var(--sans); color: var(--faint); }
.atn-cols { display: flex; gap: 10px; width: 100%; height: 130px; align-items: flex-end; }
.atn-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.atn-col i { display: block; width: 100%; height: 0; border-radius: 8px 8px 3px 3px; background: var(--mint); transition: height .5s cubic-bezier(.2,.8,.2,1); }
.atn-col i.low { background: var(--gold); }
.atn-col span { font: 600 12px var(--sans); color: var(--dim); white-space: nowrap; }

/* screens in an hour */
.atn-hour { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 5px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-sizing: border-box; }
.atn-row { display: flex; height: 18px; gap: 0; border-radius: 4px; overflow: hidden; background: var(--raised); }
.atn-row i { display: block; height: 100%; box-shadow: inset -1px 0 0 var(--surface), inset 1px 0 0 var(--surface); animation: atnGrow .35s ease-out both; }
@keyframes atnGrow { from { opacity: 0; } }
.atn-read { display: flex; flex-direction: column; align-items: center; }
.atn-read b { font: 800 34px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1.05; }
.atn-read span { font: 600 13px var(--sans); color: var(--dim); text-align: center; }
.atn-years { display: flex; gap: 10px; justify-content: center; }
.atn-yr { min-width: 86px; min-height: 44px; padding: 6px 12px; border-radius: 22px; background: var(--raised); border: 2px solid var(--line-strong); color: var(--text); font: 800 15px var(--sans); cursor: pointer; }
.atn-yr.seen { border-color: var(--line-strong); color: var(--dim); }
.atn-yr.on { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 14px rgba(252,192,80,.3); }
.atn-yr:disabled { cursor: default; }

@media (max-height: 700px) {
  .atn-claim { min-height: 0; padding: 4px 16px; }
  .atn-bowl { width: 56%; max-width: 220px; }
  .atn-mini .atn-bowl { width: 40%; max-width: 150px; }
  .atn-watch { min-width: 104px; padding: 6px 10px 8px; }
  .atn-watch b { font-size: 28px; }
  .atn-clock { width: 196px; height: 196px; }
  .atn-clock.atn-small { width: 104px; height: 104px; }
  .atn-cols { height: 96px; }
  .atn-pic { max-height: 230px; }
  .atn-row { height: 14px; }
  .atn-read b { font-size: 28px; }
}