/* 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(--faint); }

/* the sentence, with the looks drawn over it */
.at-wrap { position: relative; padding-top: 34px; }
.at-looks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.at-ln { fill: none; stroke: var(--violet-bright); stroke-linecap: round; }
.at-ln.big { stroke: var(--gold); }
.at-sent { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 30px 6px; justify-content: center; }
.at-w {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 4px 10px; border-radius: 12px;
  background: var(--surface); border: 2px solid var(--line); box-shadow: 0 4px 0 #070a14; color: var(--text);
  font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.15;
  transition: border-color .25s, opacity .3s, background .3s, color .3s;
}
button.at-w { cursor: pointer; }
button.at-w:disabled { opacity: 1; cursor: default; }
.at-w.at-src { border-color: var(--violet-bright); background: color-mix(in srgb, var(--violet) 26%, var(--surface)); color: #fff; }
.at-w.at-cand { border-color: var(--line-strong); background: var(--raised); }
.at-w.hot { border-color: var(--gold); color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.at-w.wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 16%, var(--surface)); }
.at-w.at-new { color: var(--gold); }
.at-w.swap { transform: scale(.8); opacity: .3; transition: transform .25s, opacity .25s; }
.at-w.dim { opacity: .45; }

.at-tag { align-self: center; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--gold); border: 1.5px solid var(--gold); }
.at-tag.raw { color: var(--dim); border-color: var(--line-strong); }

/* one row: the bank sentence */
.at-sent.at-one { flex-wrap: nowrap; gap: 5px; }
.at-sent.at-one .at-w { font-size: 16px; padding: 4px 7px; min-width: 40px; }

/* bank: two meanings */
.at-pics { display: flex; align-items: center; justify-content: center; gap: 10px; }
.at-pic { margin: 0; flex: 1; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line); transition: opacity .4s, border-color .4s, transform .4s; }
.at-pic img { display: block; width: 100%; height: 92px; object-fit: contain; }
.at-pic figcaption { font-size: 13px; font-weight: 700; color: var(--dim); }
.at-or { font-family: var(--serif); font-size: 18px; color: var(--faint); }
.at-pic.lit { border-color: var(--gold); transform: scale(1.05); }
.at-pic.lit figcaption { color: var(--gold); }
.at-pic.off { opacity: .3; }

/* translation */
.at-tr { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.at-lang { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.at-trrow { display: flex; gap: 8px; justify-content: center; }
.at-trrow .at-w { font-size: 17px; padding: 4px 9px; }
.at-w.lit { border-color: var(--gold); color: var(--gold); }
.at-fr small { display: block; font-family: var(--sans); font-size: 14px; font-weight: 700; color: var(--violet-bright); }
.at-tlines { display: block; width: 100%; height: 70px; overflow: visible; }
.at-tl { fill: none; stroke: var(--violet-bright); stroke-width: 3; stroke-linecap: round; }
.at-tl.key { stroke: var(--gold); stroke-width: 4; }

/* back on the word map */
.at-strip { align-self: center; padding: 6px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-family: var(--serif); font-size: 17px; color: var(--text); }
.at-strip b { color: var(--gold); }
.at-strip i { font-style: normal; color: var(--violet-bright); font-weight: 700; }
.at-map { width: 100%; }
.at-msvg { display: block; width: 100%; height: auto; overflow: visible; }
.at-mbg { fill: #0D1224; stroke: var(--line); }
.at-zone { fill: rgba(169,155,255,.05); stroke: rgba(169,155,255,.25); stroke-width: 1.5; stroke-dasharray: 5 5; cursor: pointer; transition: fill .3s, stroke .3s; }
.at-zone.mine { stroke: var(--violet-bright); stroke-dasharray: none; }
.at-zone.yes { fill: rgba(252,192,80,.1); stroke: var(--gold); stroke-dasharray: none; }
.at-mword circle { stroke-width: 1.5; }
.at-mword text { font-family: var(--sans); font-size: 15px; font-weight: 700; text-anchor: middle; fill: var(--text); paint-order: stroke; stroke: #0D1224; stroke-width: 4px; stroke-linejoin: round; }
.at-mword.m circle { fill: var(--gold); stroke: #FFE2A0; }
.at-mword.r circle { fill: #4FA8E8; stroke: #A9D8FF; }
.at-mword.b circle { fill: #fff; stroke: var(--violet-bright); stroke-width: 3; }
.at-mword.b text { fill: var(--violet-bright); font-size: 17px; }
.at-mlook { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 5 5; stroke-linecap: round; }

@media (max-height: 700px) {
  .at-w { font-size: 17px; padding: 3px 8px; }
  .at-sent { gap: 24px 5px; }
  .at-wrap { padding-top: 28px; }
  .at-pic img { height: 56px; }
  .at-pic { padding: 6px; }
  .at-sc { gap: 8px; }
  .at-tlines { height: 56px; }
}