/* Bankruptcy lesson. All rules scoped under .bkr-* */
.bkr-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; margin: 0 auto; line-height: 1.35; }

/* ---------- the bakery: lenders, Rosa, her things ---------- */
.bkr-shop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 360px; margin: 0 auto; }
.bkr-lenders, .bkr-things { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.bkr-l { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; transition: opacity .4s, filter .4s; }
.bkr-l img { height: 90px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,.4)); transition: filter .4s; }
.bkr-l b { font: 700 12.5px/1.15 var(--sans); color: var(--text); }
.bkr-owed { font: 500 12px var(--sans); color: var(--faint); }
.bkr-got { font: 800 13px var(--sans); min-height: 17px; color: var(--text); }
.bkr-l.paid .bkr-got { color: var(--mint); animation: rise .35s cubic-bezier(.2,.8,.2,1); }
.bkr-l.none { opacity: .5; filter: grayscale(1); }
.bkr-l.stop .bkr-got { color: #9CD3FF; }
.bkr-shop.frozen .bkr-l img { filter: drop-shadow(0 0 7px rgba(156,211,255,.9)) saturate(.45); }
.bkr-mid { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 72px; width: 100%; }
.bkr-mid img { height: 72px; width: auto; }
.bkr-mid span { font: 500 13px/1.3 var(--sans); color: var(--dim); }
.bkr-mid span b { color: var(--text); font-weight: 800; }
.bkr-pot { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 6px 14px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #FFF1B8, var(--gold) 55%, var(--gold-deep)); font: 800 16px var(--sans); color: #3A2A00; box-shadow: 0 0 18px rgba(255,200,60,.6); opacity: 0; scale: .5; transition: opacity .3s, scale .35s cubic-bezier(.3,1.6,.5,1); z-index: 3; }
.bkr-shop.pot .bkr-pot { opacity: 1; scale: 1; }
.bkr-shop.sold .bkr-mid img, .bkr-shop.sold .bkr-mid span { opacity: .25; transition: opacity .3s; }
.bkr-shop.split .bkr-mid span { opacity: 1; }
.bkr-t { display: flex; flex-direction: column; align-items: center; gap: 2px; transition: translate .5s cubic-bezier(.5,0,.3,1), scale .5s, opacity .3s; z-index: 2; }
.bkr-t img { height: 70px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0,0,0,.4)); }
.bkr-t span { font: 800 13px var(--sans); color: var(--gold); transition: opacity .2s; }
.bkr-t.taken { scale: .45; }
.bkr-t.taken span { opacity: 0; }
.bkr-shop.pot .bkr-t, .bkr-shop.split .bkr-t { opacity: 0; }
.bkr-stamp { position: relative; padding: 6px 12px; border: 3px solid var(--violet-bright); border-radius: 8px; background: rgba(20,16,40,.82); font: 800 17px var(--sans); color: var(--violet-bright); white-space: nowrap; rotate: -8deg; scale: 1.8; opacity: 0; transition: opacity .2s, scale .35s cubic-bezier(.3,1.4,.5,1); z-index: 4; pointer-events: none; }
.bkr-shop.filed .bkr-stamp { opacity: 1; scale: 1; }
.bkr-shop.sold .bkr-stamp { opacity: 0; }
.bkr-shop.split .bkr-stamp { display: none; }

/* ---------- the tow truck ---------- */
.bkr-tow { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding-top: 12px; }
.bkr-tow img { width: 250px; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.bkr-tag { font: 600 13px var(--sans); color: var(--dim); }
.bkr-halt { position: absolute; left: 50%; top: 30px; translate: -50% 0; padding: 4px 12px; border: 3px solid #9CD3FF; border-radius: 8px; background: rgba(10,20,36,.85); font: 800 18px var(--sans); color: #9CD3FF; rotate: -8deg; scale: 1.8; opacity: 0; transition: opacity .2s, scale .35s cubic-bezier(.3,1.4,.5,1); }
.bkr-tow.halt .bkr-halt { opacity: 1; scale: 1; }

/* ---------- last in line ---------- */
.bkr-last { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.bkr-me { display: flex; align-items: center; gap: 10px; }
.bkr-me img { height: 86px; width: auto; }
.bkr-me span { font: 600 13.5px/1.3 var(--sans); color: var(--dim); max-width: 170px; }
.bkr-pk { width: 100%; }
.bkr-pk .choices.bkr-two { display: flex; flex-direction: row; justify-content: center; gap: 12px; }
.bkr-pk .choice { width: 152px; min-height: 92px; padding: 12px 10px; justify-content: center; border-radius: 16px; background: var(--surface); }
.bkr-way { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.bkr-way b { font: 800 18px var(--sans); color: var(--text); }
.bkr-way span { font: 500 12.5px/1.3 var(--sans); color: var(--dim); }

/* ---------- wiping what's left ---------- */
.bkr-wipe { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 340px; margin: 0 auto; }
.bkr-cap { font: 600 13px var(--sans); color: var(--dim); }
.bkr-ious { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; touch-action: none; }
.bkr-iou { position: relative; min-height: 62px; padding: 8px 10px; border: none; border-radius: 8px; background: #F4E9D2; box-shadow: 0 5px 10px rgba(0,0,0,.4); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; cursor: pointer; font: inherit; text-align: left; transition: opacity .35s, transform .35s; }
.bkr-iou span { font: 600 12.5px var(--sans); color: #6A5634; pointer-events: none; }
.bkr-iou b { font: 800 19px var(--sans); color: #2A1E0C; pointer-events: none; transition: color .3s; }
.bkr-iou i { position: absolute; right: 8px; top: 50%; translate: 0 -50%; padding: 2px 6px; border: 2.5px solid #5B3FD0; border-radius: 5px; font: 800 13px var(--sans); font-style: normal; color: #5B3FD0; rotate: -10deg; scale: 1.8; opacity: 0; transition: opacity .15s, scale .3s cubic-bezier(.3,1.4,.5,1); pointer-events: none; }
.bkr-iou.gone { opacity: .55; transform: scale(.96); cursor: default; }
.bkr-iou.gone b { color: rgba(42,30,12,.45); text-decoration: line-through; }
.bkr-iou.gone i { opacity: 1; scale: 1; }
.bkr-stay { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; font: 600 12.5px var(--sans); color: var(--dim); opacity: 0; transition: opacity .4s; }
.bkr-wipe.done .bkr-stay { opacity: 1; }
.bkr-chip { padding: 4px 9px; border-radius: 8px; background: var(--raised); border: 1px solid var(--line-strong); color: var(--text); }

/* ---------- the landlord calls ---------- */
.bkr-call { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.bkr-call img { height: 170px; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.bkr-said { max-width: 170px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--raised); border: 1px solid var(--line-strong); font: 600 15px/1.35 var(--sans); color: var(--text); }

/* ---------- Dickens ---------- */
.bkr-dickens { margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bkr-dickens img { height: 220px; width: auto; border-radius: 12px; border: 1px solid var(--line-strong); box-shadow: 0 8px 18px rgba(0,0,0,.45); }
.bkr-dickens figcaption { font: 500 12px var(--sans); color: var(--faint); text-align: center; max-width: 260px; }

@media (max-height: 700px) {
  .bkr-shop { gap: 6px; }
  .bkr-l img { height: 66px; }
  .bkr-owed { display: none; }
  .bkr-mid { min-height: 62px; } .bkr-mid img { height: 62px; }
  .bkr-t img { height: 52px; }
  .bkr-stamp { margin-top: 0; }
  .bkr-tow img { width: 210px; }
  .bkr-me img { height: 70px; }
  .bkr-iou { min-height: 54px; }
  .bkr-call img { height: 140px; }
  .bkr-dickens img { height: 180px; }
}