/* Great Depression lesson. All rules scoped under .grd-* */
.grd-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.grd-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 330px; }
.grd-hero img { width: 360px; max-width: 100%; max-height: 46vh; object-fit: contain; display: block; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.grd-pp { display: block; width: 100%; height: 100%; }

/* the bank */
.grd-run { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.grd-bank { position: relative; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; }
.grd-vault { display: flex; gap: 6px; }
.grd-vault i { display: block; width: 26px; height: 30px; border-radius: 6px; background: repeating-linear-gradient(180deg, var(--gold) 0 5px, #C99232 5px 7px); box-shadow: 0 0 10px rgba(252,192,80,.35); transition: opacity .3s, transform .3s; }
.grd-vault i.gone { opacity: .12; transform: translateY(-8px); box-shadow: none; }
.grd-bl b { display: block; font: 700 22px var(--sans); color: var(--text); }
.grd-bl span { font: 600 12.5px var(--sans); color: var(--dim); }
.grd-shut { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(40,10,14,.88); border: 2px solid var(--red); color: var(--red); font: 800 18px var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .3s; }
.grd-run.shut .grd-shut { opacity: 1; }
.grd-lent { font: 600 12.5px var(--sans); color: var(--faint); }
.grd-line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; }
.grd-sv { all: unset; box-sizing: border-box; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; transition: border-color .2s, opacity .3s; }
.grd-sv svg { width: 20px; height: 24px; fill: var(--violet-bright); }
.grd-sv span { font: 700 12.5px var(--sans); color: var(--dim); }
.grd-sv.paid { border-color: var(--mint); }
.grd-sv.paid svg { fill: var(--mint); }
.grd-sv.paid span { color: var(--mint); }
.grd-sv.stuck { opacity: .4; }
.grd-sv.stuck span { color: var(--red); }

/* the lending step */
.grd-pre .grd-vault { opacity: 0; transition: opacity .3s; }
.grd-pre.lent .grd-vault { opacity: 1; }
.grd-pre .grd-lent { opacity: 0; transition: opacity .4s; }
.grd-pre.lent .grd-lent { opacity: 1; }
.grd-pre .grd-sv { pointer-events: none; opacity: .55; transition: opacity .2s, border-color .2s; }
.grd-pre .grd-sv.in { opacity: 1; border-color: var(--gold); }
.grd-pre.full .grd-bank { box-shadow: 0 0 18px rgba(252,192,80,.35); }
.grd-run { position: relative; }
.grd-coin { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE7A3, var(--gold) 55%, var(--gold-deep)); pointer-events: none; z-index: 2; }

/* the town */
.grd-tw { width: 100%; max-width: 350px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.grd-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.grd-bk2, .grd-fm { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.grd-bk2 svg { width: 34px; height: 29px; fill: #CFC6E8; }
.grd-bk2 span, .grd-fm span { font: 700 13.5px var(--sans); color: var(--text); }
.grd-bs { font: 800 12.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.grd-tw.lend .grd-bs { color: var(--mint); }
.grd-fed { position: absolute; top: -10px; right: -8px; padding: 1px 7px; border-radius: 8px; background: var(--mint); color: var(--mint-ink); font: 800 12px var(--sans); font-style: normal; opacity: 0; scale: .5; transition: opacity .3s, scale .3s cubic-bezier(.2,.8,.2,1.5); }
.grd-tw.lend .grd-fed { opacity: 1; scale: 1; }
.grd-tw.lit .grd-fed { box-shadow: 0 0 10px var(--mint); }
.grd-ppl { display: flex; gap: 2px; }
.grd-ppl svg { width: 16px; height: 20px; fill: var(--violet-bright); }
.grd-lock { position: absolute; left: 50%; bottom: -11px; translate: -50% 0; white-space: nowrap; padding: 1px 8px; border-radius: 8px; font: 800 12px var(--sans); background: var(--red); color: #fff; opacity: 0; transition: opacity .3s; }
.grd-tw.shut .grd-lock, .grd-tw.safe .grd-lock { opacity: 1; }
.grd-tw.safe .grd-lock { background: var(--mint); color: var(--mint-ink); }
.grd-meter { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 12.5px var(--sans); color: var(--dim); white-space: nowrap; }
.grd-mt { flex: 1; height: 10px; border-radius: 5px; background: rgba(234,227,215,.08); overflow: hidden; }
.grd-mt i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--gold-deep), var(--gold)); }
.grd-shops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grd-sh { --lit: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 4px 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.grd-aw { align-self: stretch; height: 9px; background: repeating-linear-gradient(90deg, var(--gold) 0 10px, #C99232 10px 20px); opacity: calc(.3 + .7 * var(--lit)); transition: opacity .6s; }
.grd-sh b { font: 700 13px var(--sans); color: var(--text); opacity: calc(.45 + .55 * var(--lit)); transition: opacity .6s; }
.grd-wk { display: flex; gap: 6px; }
.grd-wk svg { width: 18px; height: 22px; fill: var(--mint); transition: fill .3s, opacity .3s, translate .5s; }
.grd-wk svg.out { fill: var(--red); opacity: .45; translate: 0 4px; }
.grd-jobs { text-align: center; font: 600 13px var(--sans); color: var(--dim); }
.grd-jobs b { color: var(--text); }
.grd-steps { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: center; gap: 4px 4px; min-height: 68px; }
.grd-st { padding: 3px 8px; border-radius: 8px; background: rgba(216,85,85,.16); border: 1px solid rgba(216,85,85,.5); font: 700 12.5px var(--sans); color: var(--text); animation: rise .35s cubic-bezier(.2,.8,.2,1) both; }
.grd-st.more { background: none; border-color: transparent; color: var(--dim); font-style: italic; }
.grd-st.ok { background: rgba(63,214,154,.14); border-color: rgba(63,214,154,.5); }
.grd-ar2 { width: 8px; height: 2px; background: var(--faint); }

@media (max-height: 700px) {
  .grd-hero img { max-height: 40vh; }
  .grd-sv { min-height: 50px; }
  .grd-wk svg { width: 15px; height: 19px; }
  .grd-steps { min-height: 68px; }
}

/* the spiral, in order */
.grd-chain { width: 100%; max-width: 300px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.grd-chain .slot { min-height: 46px; flex-direction: row; justify-content: center; gap: 8px; }
.grd-bankc { justify-content: center; }
.grd-cn { text-align: center; font: 700 14px var(--sans); color: var(--red); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 10px; }
.grd-cn.back { color: var(--dim); font-weight: 600; font-size: 13px; }
.grd-ar { display: block; width: 2px; height: 10px; margin: 0 auto; background: rgba(169,155,255,.5); }
@media (max-height: 700px) {
  .grd-chain .slot { min-height: 44px; padding: 4px; }
  .grd-cn { padding: 7px 10px; }
  .grd-ar { height: 6px; }
}
.grd-chain .slot .n { font-size: 13px; }
.grd-pre .grd-bank { align-self: flex-start; }
.grd-farms { position: absolute; top: 0; right: 0; width: 120px; height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line-strong); text-align: center; }
.grd-farms b { font: 700 18px var(--sans); color: var(--text); }
.grd-farms span { font: 600 12px/1.15 var(--sans); color: var(--dim); }
.grd-pre .grd-lent { visibility: hidden; }