/* 鍋ごとのカード：中身の高さで残りが分かる。札（残りわずか・売り切れ）はスタンプ風に */
.pots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pot { position: relative; overflow: hidden; display: grid; gap: 12px; border-top: 6px solid var(--c); }
.pot-head { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.pot-head b { font-family: var(--font-head); font-weight: 400; font-size: 18px; }
.pot-head .small { width: 100%; }
.pot-body { display: flex; gap: 16px; align-items: center; }
.pot-vis { position: relative; width: 84px; height: 84px; flex: none; border-radius: 10px 10px 40px 40px; background: #f3e6d0; border: 3px solid #3b2a20; overflow: hidden; box-shadow: inset 0 6px 0 rgba(255, 255, 255, .6); }
.pot-vis i { position: absolute; left: 0; right: 0; bottom: 0; background: radial-gradient(60% 30% at 50% 0, rgba(255, 255, 255, .35), transparent 70%), var(--c); transition: height .4s; }
.pot-num { display: grid; line-height: 1.2; }
.pot-num span { font-size: 12px; color: var(--muted); }
.pot-num b { font-family: var(--font-head); font-weight: 400; font-size: 44px; color: var(--c); }
.pot-num small { font-size: 13px; color: var(--muted); }
.pot-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn.big { grid-column: 1 / -1; order: -1; font-size: 17px; padding: 12px; white-space: nowrap; }
.pot.out { opacity: .75; }
.pot.out .pot-btns .btn.big { background: #b9a99a; border-color: #b9a99a; }
.stamp { position: absolute; right: 10px; top: 64px; z-index: 2; padding: 6px 12px; font-family: var(--font-head); font-size: 18px; color: #b8281c; border: 3px solid #b8281c; border-radius: 8px; transform: rotate(-10deg); background: rgba(255, 255, 255, .85); }
.stamp.few { color: #d9781e; border-color: #d9781e; font-size: 14px; }

/* 時間ごとの売れ行き（積み上げ） */
.hours { display: flex; gap: 8px; align-items: flex-end; height: 200px; padding-top: 10px; flex-wrap: wrap; }
.hr { flex: 1; min-width: 26px; height: 170px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.stack-bar { width: 100%; max-width: 46px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; min-height: 2px; transition: height .4s; }
.stack-bar i { display: block; min-height: 2px; }
.hr span { font-size: 11px; color: var(--muted); }
.hr-legend { width: 100%; display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; }
.hr-legend i, .dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tbl td.out { color: var(--danger); font-weight: 700; }