/* Inflation lesson. All rules scoped under .inf-* */
.inf-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.inf-note { font-size: 12.5px; color: var(--faint); text-align: center; max-width: 320px; }

/* the cart */
.inf-cart { width: 100%; max-width: 350px; display: flex; flex-direction: column; gap: 10px; }
.inf-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.inf-it { flex: 0 0 calc(25% - 5px); box-sizing: border-box; position: relative; min-height: 108px; padding: 6px 2px 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 1px; animation: inf-drop .45s cubic-bezier(.3,1.3,.6,1) both; transition: opacity .3s, filter .3s, transform .3s; }
.inf-it img { height: 58px; width: 68px; object-fit: contain; }
.inf-it span { font: 600 12px var(--sans); color: var(--dim); white-space: nowrap; }
.inf-it b { font: 800 14px var(--sans); color: var(--text); font-variant-numeric: tabular-nums; }
.inf-cart.roll .inf-it b { color: var(--gold); }
.inf-cart.still .inf-it { animation: none; }
.inf-it.out { opacity: .32; filter: grayscale(1); transform: scale(.9); }
.inf-it.out::after { content: 'put back'; position: absolute; top: 34%; left: 50%; translate: -50% 0; padding: 2px 6px; border-radius: 6px; background: rgba(10,14,26,.9); font: 700 12px var(--sans); color: var(--text); white-space: nowrap; }
@keyframes inf-drop { from { opacity: 0; transform: translateY(-30px); } }
.inf-rec { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 10px; padding: 10px 14px; border-radius: 14px; background: #f4efe2; color: #2a2418; transition: background .3s; }
.inf-yr { font: 800 13px var(--sans); color: #6b5e40; letter-spacing: .04em; }
.inf-tl { font: 700 13px var(--sans); }
.inf-tl b { font: 800 22px var(--sans); font-variant-numeric: tabular-nums; }
.inf-have { font: 600 12.5px var(--sans); color: #6b5e40; }
.inf-have b { color: #2a2418; }
.inf-rec.over { background: #ffe1a6; }
.inf-rec.over .inf-tl b { color: #8a4b00; }
@media (max-height: 700px) {
  .inf-it { min-height: 92px; }
  .inf-it img { height: 44px; }
}

/* the island */
.inf-isle { width: 100%; max-width: 340px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.inf-shop { width: 100%; padding: 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.inf-loaves { display: grid; grid-template-columns: repeat(5, 48px); gap: 4px 10px; }
.inf-loaves img { width: 48px; height: 38px; object-fit: contain; transition: transform .4s, opacity .4s; }
.inf-isle.sold .inf-loaves img { opacity: .45; transform: translateY(6px); }
.inf-tag { font: 700 14px var(--sans); color: var(--dim); }
.inf-tag b { font: 800 22px var(--sans); color: var(--gold); font-variant-numeric: tabular-nums; }
.inf-folk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 8px; width: 100%; }
.inf-p { display: flex; flex-direction: column; align-items: center; gap: 0; }
.inf-p img { width: 40px; height: 40px; object-fit: contain; transition: transform .3s; }
.inf-p b { font: 800 12.5px var(--sans); color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inf-isle.rich .inf-p b { color: var(--gold); }
.inf-isle.bid .inf-p img { animation: inf-wave .5s ease-in-out 2; }
@keyframes inf-wave { 50% { transform: translateY(-6px) rotate(-6deg); } }
@media (max-height: 700px) { .inf-p img { width: 32px; height: 32px; } .inf-loaves img { width: 40px; height: 30px; } }