/* Gold Standard lesson. All rules scoped under .gst-* */

/* the 1922 note */
.gst-cert { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 16px; }
.gst-cert-n { position: relative; width: 100%; max-width: 420px; transition: scale .6s, translate .6s; }
.gst-cert-n img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.gst-cert-hi { position: absolute; left: 33%; top: 47%; width: 44%; height: 27%; border-radius: 10px; border: 3px solid var(--gold); box-shadow: 0 0 22px rgba(252,192,80,.6); opacity: 0; scale: 1.2; transition: opacity .4s, scale .4s; }
.gst-cert.hi .gst-cert-hi { opacity: 1; scale: 1; }
.gst-cert.pay .gst-cert-n { scale: .86; }
.gst-coins { display: flex; justify-content: center; gap: 4px; min-height: 66px; }
.gst-coins img { width: 62px; height: 62px; object-fit: cover; border-radius: 50%; opacity: 0; translate: 0 -80px; filter: drop-shadow(0 6px 12px rgba(252,192,80,.45)); }
.gst-cert.pay .gst-coins img { animation: gstDrop .5s cubic-bezier(.3,1.4,.5,1) forwards; animation-delay: calc(var(--i) * 170ms); }
@keyframes gstDrop { to { opacity: 1; translate: 0 0; } }

/* the price tag */
.gst-rule { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gst-rule > img { width: 190px; filter: drop-shadow(0 10px 20px rgba(252,192,80,.35)); }
.gst-tag { display: inline-flex; flex-direction: column; align-items: center; padding: 6px 16px; border-radius: 12px; background: var(--surface); border: 2px solid var(--gold); box-shadow: 0 0 16px rgba(252,192,80,.3); font-family: var(--sans); color: var(--text); }
.gst-tag span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.gst-tag b { font: 800 26px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.gst-tag.sm { padding: 4px 12px; min-height: 48px; justify-content: center; }
.gst-tag.sm b { font-size: 21px; }
.gst-tag.roll { animation: gstRoll .9s ease-out; }
@keyframes gstRoll { 30% { scale: 1.12; } }

/* the vault */
.gst-v { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 8px; }
.gst-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gst-press { position: relative; width: 64px; height: 56px; }
.gst-press img { width: 100%; height: 100%; object-fit: contain; }
.gst-press i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -12deg; white-space: nowrap; padding: 2px 6px; border: 2px solid var(--red); border-radius: 6px; background: rgba(10,14,26,.85); font: 800 12px var(--sans); font-style: normal; color: var(--red); text-transform: uppercase; opacity: 0; scale: 1.6; transition: opacity .25s, scale .25s; }
.gst-press.jam i { opacity: 1; scale: 1; }
.gst-cols { display: flex; gap: 8px; }
.gst-col { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 14px; background: var(--surface); border: 2px solid var(--line-strong); min-height: 186px; }
.gst-h { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.gst-bars, .gst-buns { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 2px 4px; flex: 1; }
.gst-bar { width: 58px; height: 42px; object-fit: contain; }
.gst-bun { width: 50px; height: 40px; object-fit: contain; }
.gst-bar.drop { animation: gstBar .5s cubic-bezier(.3,1.4,.5,1); }
@keyframes gstBar { from { translate: 0 -40px; opacity: 0; } }
.gst-bun.pop { animation: gstPop .35s cubic-bezier(.2,.8,.2,1.5); }
@keyframes gstPop { from { scale: .3; opacity: 0; } }
.gst-room { font: 700 12.5px var(--sans); color: var(--mint); }
.gst-room.none { color: var(--dim); }
.gst-note { font-size: 12.5px; color: var(--faint); text-align: center; }
.gst-cart { position: absolute; left: -30%; bottom: 28px; width: 92px; opacity: 0; pointer-events: none; }
.gst-cart.in { animation: gstCart .8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes gstCart { to { left: 28%; opacity: 1; } }
.gst-cart.out { transition: opacity .4s; opacity: 0 !important; animation: none; left: 28%; }

/* answering in the scene */
.gst-pk { cursor: pointer; }
.gst-col.right, .gst-tag.right { border-color: var(--mint); box-shadow: 0 0 18px rgba(63,214,154,.4); }
.gst-col.wrong { border-color: var(--red); }

/* 1933 */
.gst-order { width: 100%; display: flex; justify-content: center; }
.gst-order img { width: 100%; max-width: 380px; display: block; }

@media (max-height: 700px) {
  .gst-col { min-height: 150px; }
  .gst-bar { width: 50px; height: 34px; }
  .gst-bun { width: 42px; height: 32px; }
  .gst-press { width: 54px; height: 46px; }
  .gst-rule > img { width: 150px; }
  .gst-cert-n { max-width: 340px; }
  .gst-order img { max-width: 320px; }
  .gst-note { display: none; }
}