/* Barter lesson. All rules scoped under .brt-* */

/* the red paperclip */
.brt-pc { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 18px; }
.brt-pc-n { display: flex; align-items: baseline; gap: 8px; font: 700 13px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.brt-pc-n b { font: 800 40px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: center; letter-spacing: 0; }
.brt-pc-stage { position: relative; width: min(78vw, 300px); aspect-ratio: 1; }
.brt-pc-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px rgba(123,92,253,.3)); }
.brt-pc-clip { animation: brtIn .6s cubic-bezier(.2,.8,.2,1.3) both; transition: scale .5s, opacity .5s; }
@keyframes brtIn { from { opacity: 0; scale: .6; } }
.brt-pc.go .brt-pc-clip { scale: .55; opacity: .35; }
.brt-pc-house { opacity: 0; scale: .5; transition: opacity .5s, scale .6s cubic-bezier(.2,.8,.2,1.4); }
.brt-pc.home .brt-pc-clip { opacity: 0; }
.brt-pc.home .brt-pc-house { opacity: 1; scale: 1; }
.brt-pc-tag { position: absolute; left: 50%; bottom: -6px; translate: -50% 0; white-space: nowrap; padding: 8px 16px; border-radius: 999px; background: var(--raised); border: 2px solid var(--violet-bright); box-shadow: 0 0 18px rgba(123,92,253,.35); font: 800 18px var(--sans); color: var(--text); }
.brt-pc-tag.flip { animation: brtFlip .26s ease-out; }
@keyframes brtFlip { from { opacity: 0; translate: -50% 8px; } }
.brt-pc.home .brt-pc-tag { border-color: var(--gold); box-shadow: 0 0 18px rgba(252,192,80,.4); }

/* the market */
.brt-mk { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.brt-row { display: flex; justify-content: center; gap: 6px; width: 100%; }
.brt-p { position: relative; flex: 1 1 0; max-width: 124px; display: flex; flex-direction: column; align-items: center; padding: 0 2px 4px; border: 2px solid transparent; border-radius: 14px; background: transparent; color: var(--text); font-family: var(--sans); cursor: pointer; transition: opacity .3s, border-color .3s; }
.brt-p .brt-who { height: 112px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(123,92,253,.25)); }
.brt-p b { font: 800 14px var(--sans); margin-top: 2px; }
.brt-has { font: 600 12.5px var(--sans); color: var(--dim); }
.brt-p.done { opacity: .55; cursor: default; }
.brt-bub { display: flex; align-items: center; gap: 4px; height: 44px; padding: 3px 8px 3px 10px; margin-bottom: 4px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line-strong); visibility: hidden; }
.brt-bub span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.brt-bub img { height: 34px; width: 34px; object-fit: contain; }
.brt-bub.on { visibility: visible; }
.brt-bub.pop { animation: brtPop .3s cubic-bezier(.2,.8,.2,1.5); }
@keyframes brtPop { from { scale: .6; opacity: 0; } }
.brt-you { display: flex; justify-content: center; gap: 8px; width: 100%; max-width: 360px; transition: box-shadow .4s; border-radius: 16px; }
.brt-you > div { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 58px; padding: 4px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); }
.brt-you span { font: 700 12px var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .04em; line-height: 1.15; }
.brt-you img { height: 44px; width: 44px; object-fit: contain; transition: opacity .2s; }
.brt-hold { border-color: var(--gold) !important; }
.brt-count { flex-direction: column; gap: 0 !important; }
.brt-count b { font: 800 22px var(--sans); color: var(--gold); line-height: 1; font-variant-numeric: tabular-nums; }
.brt-count small { font: 600 12px var(--sans); color: var(--faint); }
.brt-you.won .brt-goal { border-color: var(--mint); box-shadow: 0 0 16px rgba(63,214,154,.35); }
.brt-fly { position: fixed; width: 48px; height: 48px; object-fit: contain; z-index: 60; pointer-events: none; }

/* the camp */
.brt-camp { position: relative; width: 100%; max-width: 380px; }
.brt-camp-i { display: block; width: 100%; }
.brt-camp-c { position: absolute; right: 4%; bottom: 2%; width: 30%; opacity: 0; scale: .4; rotate: -12deg; transition: opacity .4s, scale .6s cubic-bezier(.2,.8,.2,1.5); filter: drop-shadow(0 6px 14px rgba(252,192,80,.5)); }
.brt-camp.cigs .brt-camp-c { opacity: 1; scale: 1; }

/* the woodcut */
.brt-wood { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.brt-wood img { width: 100%; max-width: 360px; border-radius: 10px; display: block; }
.brt-wood span { font-size: 12.5px; color: var(--faint); text-align: center; }

@media (max-height: 700px) {
  .brt-p .brt-who { height: 100px; }
  .brt-bub { height: 38px; }
  .brt-bub img { height: 28px; width: 28px; }
  .brt-you > div { min-height: 50px; }
  .brt-you img { height: 36px; width: 36px; }
  .brt-pc-stage { width: min(64vw, 240px); }
  .brt-camp { max-width: 320px; }
  .brt-wood img { max-width: 300px; }
}