/* Authority bias. All rules scoped under .auth-* */
.auth-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the call */
.auth-desk { position: relative; width: 100%; max-width: 360px; height: 320px; }
.auth-nurse { position: absolute; left: 0; bottom: 0; height: 74%; width: auto; filter: drop-shadow(0 10px 22px rgba(123,92,253,.3)); }
.auth-desk::after { content: ''; position: absolute; left: 28%; top: 33%; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--gold); opacity: 0; pointer-events: none; }
.auth-ring::after { animation: authWave .6s ease-out 3; }
@keyframes authWave { from { scale: .4; opacity: .9; } to { scale: 1.8; opacity: 0; } }
.auth-ring .auth-nurse { animation: authBuzz .12s linear 10 alternate; }
@keyframes authBuzz { from { translate: -1px 0; } to { translate: 1px 0; } }
.auth-bubs { position: absolute; right: 0; top: 0; width: 64%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.auth-bub { max-width: 100%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--raised); border: 1px solid var(--line-strong); font: 700 14.5px/1.3 var(--sans); color: var(--text); animation: authPop .35s cubic-bezier(.2,.8,.2,1.3) both; }
@keyframes authPop { from { opacity: 0; scale: .7; translate: 0 8px; } }

/* the box */
.auth-box { position: relative; margin: 12px; width: 230px; min-height: 210px; padding: 18px 16px; border-radius: 12px; border: 2px solid #c9bfa6; background: linear-gradient(160deg, #f6efe0, #e2d6bc); color: #2a2418; box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 24px rgba(123,92,253,.25); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--sans); }
.auth-box .auth-cap { font: 800 15px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #6b5d3f; transition: opacity .3s; }
.auth-lbl { display: flex; flex-direction: column; align-items: center; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s, opacity .5s; }
.auth-lbl b { font: 900 26px var(--serif); letter-spacing: .08em; color: #3a2f6b; }
.auth-lbl span { font: 600 15px var(--sans); }
.auth-lbl em { font: 800 16px var(--sans); font-style: normal; padding: 4px 10px; border: 2px solid #3a2f6b; border-radius: 6px; margin-top: 4px; }
.auth-box.open { cursor: default; }
.auth-box.open .auth-cap { opacity: 0; height: 0; overflow: hidden; }
.auth-box.open .auth-lbl { max-height: 200px; opacity: 1; }
.auth-box:disabled { opacity: 1; color: #2a2418; }

/* the 22 */
.auth-row { display: grid; grid-template-columns: repeat(8, minmax(0, 38px)); gap: 6px 4px; justify-content: center; width: 100%; }
.auth-n { position: relative; display: flex; flex-direction: column; align-items: center; transition: opacity .3s, filter .3s; filter: grayscale(.8) brightness(.7); }
.auth-n img { width: 100%; height: auto; display: block; }
.auth-n i { display: block; width: 14px; height: 10px; margin-top: 2px; border-radius: 3px 3px 5px 5px; background: transparent; }
.auth-n.go { filter: none; }
.auth-n.go i { background: var(--gold); box-shadow: 0 0 8px rgba(252,192,80,.7); animation: authPop .3s both; }
.auth-n.no { filter: grayscale(1) brightness(.85); }
.auth-stamp { position: absolute; top: 30%; left: 50%; translate: -50% 0; rotate: -12deg; padding: 1px 6px; border: 2px solid #e8e8f0; border-radius: 6px; background: rgba(20,22,40,.85); font: 900 12px var(--sans); color: #fff; letter-spacing: .04em; animation: authPop .3s both; }
.auth-tally { font: 700 15px var(--sans); color: var(--dim); }
.auth-tally b { font: 800 26px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }

/* why */
.auth-had { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; }
.auth-chip { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-family: var(--sans); }
.auth-chip b { font: 800 14.5px var(--sans); color: var(--text); }
.auth-chip span { font: 600 14px var(--sans); color: var(--dim); text-align: right; }
.auth-had .choices.auth-chips { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.auth-had .choice { padding: 0; min-height: 0; background: transparent; border: 0; box-shadow: none; }
.auth-had .choice .auth-chip { width: 100%; min-height: 48px; align-items: center; }
.auth-had .choice.right .auth-chip { border: 2px solid var(--mint); }
.auth-had .choice.wrong .auth-chip { border: 2px solid var(--red); }

/* the costume */
.auth-cmp { width: 210px; }
.auth-cmp .cmp { aspect-ratio: 3 / 4; touch-action: none; }
.auth-cmp .wiper { pointer-events: none; }

@media (max-height: 700px) {
  .auth-desk { height: 250px; }
  .auth-bub { font-size: 13.5px; padding: 6px 10px; }
  .auth-box { min-height: 180px; padding: 12px; }
  .auth-row { grid-template-columns: repeat(8, minmax(0, 34px)); }
  .auth-cmp { width: 170px; }
}