/* Floralia · card sockets on the bag's item page (js/cardsocket.js, 2026-10-12): three rows - locked (🔒 +5 / +10 / +15),
   empty (+ ใส่การ์ด, the card list under it) and filled (the card, its lines, ✦ random options, re-roll / take out) */
.cs-box { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; padding: 10px 10px 8px; border-radius: 12px;
  background: linear-gradient(rgba(44, 33, 86, 0.16), rgba(44, 33, 86, 0.08)); box-shadow: inset 0 0 0 1.5px rgba(201, 154, 60, 0.55); }
.cs-h { display: flex; flex-direction: column; gap: 1px; }
.cs-h b { font: 800 15px/1.2 Mali, sans-serif; color: #6b3fa0; }
.cs-h small { font: 500 11.5px/1.35 Mali, sans-serif; color: #6b5a78; }
.cs-row, .cs-prow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.45); box-shadow: inset 0 0 0 1px rgba(107, 74, 36, 0.18); }
.cs-slot { flex: none; width: 46px; height: 58px; display: grid; place-items: center; border-radius: 7px; overflow: hidden;
  background: url(../assets/ui_cards/card_back.png) center / 100% 100% no-repeat; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); }
.cs-slot img { width: 140%; height: auto; max-width: none; }
.cs-slot i { font: 800 20px/1 Fredoka, sans-serif; font-style: normal; color: #fff3c4; text-shadow: 0 0 6px #ffcf5a, 0 1px 2px #000; }
.cs-row.lock .cs-slot { background: linear-gradient(rgba(10, 9, 20, 0.55), rgba(10, 9, 20, 0.55)), linear-gradient(#808080, #808080), url(../assets/ui_cards/card_back.png) center / 100% 100% no-repeat;
  background-blend-mode: normal, color, normal; }
.cs-row.lock .cs-slot i { font-size: 16px; text-shadow: none; }
.cs-row.empty .cs-slot { animation: csCall 1.8s ease-in-out infinite; }
@keyframes csCall { 50% { filter: drop-shadow(0 0 6px rgba(255, 210, 100, 0.95)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35)); } }
.cs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-info > b { font: 700 13.5px/1.25 Mali, sans-serif; color: #3b2410; }
.cs-info > b em { font: 800 11px/1 Fredoka, sans-serif; font-style: normal; padding: 1px 5px; border-radius: 5px; background: #6b3fa0; color: #fff; vertical-align: 1px; }
.cs-info > small { font: 500 11px/1.35 Mali, sans-serif; color: #6b5a78; }
.cs-lines { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 500 11.5px/1.4 Mali, sans-serif; color: #4a3424; }
.cs-lines b { color: #1f7a2a; }
.cs-lines .opt { color: #8a4fc8; }
.cs-lines .opt b { color: #8a4fc8; }
.cs-acts { flex: none; display: flex; flex-direction: column; gap: 4px; }
.cs-acts .btn { min-height: 30px; padding: 0 10px; font-size: 12px; white-space: nowrap; }
.cs-row.lock { opacity: 0.75; }
.cs-row.empty.on { box-shadow: inset 0 0 0 2px #e0a53b; }
.cs-pick { display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow-y: auto; padding: 4px 2px 4px 14px; border-left: 2px dashed rgba(201, 154, 60, 0.6); margin-left: 22px; }
.cs-prow.busy { opacity: 0.55; }
/* the badge on an item's cell: how many cards it holds */
.eco-cell .csb { position: absolute; z-index: 3; right: 3px; bottom: 3px; min-width: 16px; height: 20px; padding: 0 3px; display: grid; place-items: center; font: 800 10px/1 Fredoka, sans-serif; font-style: normal;
  color: #fff3c4; text-shadow: 0 1px 1px #000; background: url(../assets/ui_cards/card_back.png) center / 100% 100% no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.7)); }
@media (prefers-reduced-motion: reduce) { .cs-row.empty .cs-slot { animation: none; } }