/* Attention lesson. All rules scoped under .at-* */
.at-sc { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.at-note { text-align: center; font-size: 13px; color: var(--dim); }

/* the sentence: each chip fills with its share */
.at-sent { display: flex; flex-wrap: wrap; gap: 8px 6px; justify-content: center; }
.at-w {
  position: relative; overflow: hidden; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 44px; min-height: 52px; padding: 4px 10px 3px; border-radius: 12px;
  background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 #070a14; color: var(--text);
  transition: border-color .25s, opacity .3s, background .3s;
}
button.at-w { cursor: pointer; }
/* Tap screens: only the candidates are chips. The other words are plain text,
   and "it" is marked as the word being asked about, not something to tap. */
.at-w.flat { background: transparent; border-color: transparent; box-shadow: none; min-width: 0; padding-left: 3px; padding-right: 3px; color: var(--dim); }
.at-w.flat.at-it { color: var(--violet-bright); background: transparent; border-color: transparent; }
.at-w.flat.at-it .at-t { text-decoration: underline 2px; text-underline-offset: 5px; }
button.at-w { border-color: var(--line-strong); }
.at-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(to top, rgba(252,192,80,.55), rgba(252,192,80,.3)); transition: height .5s cubic-bezier(.2,.8,.2,1); }
.at-t { position: relative; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.15; }
.at-pc { position: relative; font-family: var(--mono); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--gold); visibility: hidden; }
.at-w.big .at-pc { visibility: visible; }
.at-w.big { border-color: rgba(252,192,80,.7); }
.at-w.at-it { border-color: var(--violet-bright); background: rgba(123,92,253,.2); }
.at-w.at-it .at-fill { background: linear-gradient(to top, rgba(169,155,255,.5), rgba(169,155,255,.25)); }
.at-w.at-it .at-pc { color: var(--violet-bright); }
.at-w.hot { border-color: var(--gold); }
.at-w.hot .at-t { color: var(--gold); }
.at-w.right { border-color: var(--mint); background: rgba(63,214,154,.16); }
.at-w.wrong { border-color: var(--red); background: rgba(216,85,85,.16); }
.at-sent.done .at-w { cursor: default; }
.at-w.swap { transform: scale(.8); opacity: .3; transition: transform .25s, opacity .25s; }
.at-w.ghost { border-style: dashed; background: transparent; box-shadow: none; opacity: .5; }
.at-w.looker { border-color: var(--violet-bright); background: rgba(123,92,253,.3); }

/* the blend: each noun has a colour, "it" becomes their mix */
.at-w.tint .at-t { color: var(--at-c); }
.at-w.tint { border-color: var(--at-c); }
.at-w.mixed { background: color-mix(in srgb, var(--at-c) 30%, var(--surface)); }
.at-out { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.at-sw { flex: none; width: 44px; height: 44px; border-radius: 12px; background: rgb(40,40,50); border: 2px solid var(--violet-bright); }
.at-outt { font-size: 15px; color: var(--dim); }
.at-outt b { color: var(--text); }

/* tap "it" */
.at-itbtn { display: inline-flex; padding: 0; border-radius: 12px; }
.at-itbtn:not(:disabled) .at-w { animation: atPulse 1.2s ease-in-out 4; }
@keyframes atPulse { 50% { box-shadow: 0 4px 0 #070a14, 0 0 0 5px rgba(169,155,255,.3); } }

.at-ask { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: rgba(123,92,253,.18); border: 1px solid var(--violet); }
.at-ask span { font-size: 13px; color: var(--violet-bright); font-weight: 600; }
.at-ask b { font-family: var(--serif); font-size: 18px; color: var(--text); }
.at-ask.in { animation: atIn .3s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes atIn { from { transform: translateY(6px); opacity: 0; } }

/* 100% band */
.at-band { display: flex; height: 52px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.at-seg { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .3s; }
.at-seg b { font-size: 13px; } .at-seg span { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.at-seg-a { background: rgba(252,192,80,.55); color: #1b1305; }
.at-seg-s { background: rgba(110,170,255,.55); color: #07142b; }
.at-seg-r { background: var(--raised); color: var(--dim); }
.at-seg.gone { opacity: 0; }

/* heads */
.at-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.at-hd { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--surface); border: 2px solid var(--line); opacity: .55; transition: opacity .3s, border-color .3s; }
.at-hd span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.at-hd b { font-size: 14px; line-height: 1.25; }
.at-hd.on { opacity: 1; border-color: var(--gold); }

/* translation */
.at-tr { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0; }
.at-lang { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); text-align: center; padding: 4px 0; }
.at-trrow { display: flex; justify-content: space-between; gap: 6px; }
.at-tw { padding: 9px 10px; border-radius: 12px; font-family: var(--serif); font-size: 17px; font-weight: 600; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 #070a14; transition: opacity .3s, border-color .3s; }
.at-tw.hot { border-color: var(--gold); color: var(--gold); }
.at-tw.dim { opacity: .4; }
.at-tw.lit { border-color: var(--violet-bright); }
.at-lines { display: block; width: 100%; height: 90px; overflow: visible; }
.at-ln { fill: none; stroke: var(--violet-bright); stroke-width: 3; }
.at-ln.key { stroke: var(--gold); stroke-width: 5; }

@media (max-height: 700px) {
  .at-sc { gap: 8px; }
  .at-sent { gap: 6px 5px; }
  .at-w { min-height: 46px; padding: 3px 8px 2px; }
  .at-t { font-size: 16px; }
  .at-lines { height: 60px; }
  .at-band { height: 44px; }
}